Question

我对使用HTML和CSS非常陌生，并且在按钮显示它们处于活动状态时遇到了一些麻烦（例如，默认情况下，button1具有替换颜色以显示其已经选中）。当他们点击button2时，上面的内容改变（成功），然后button2应该成为活动的。

但是，目前我甚至无法将button1设为默认活动状态。我已经在页面的其他地方成功完成了这项工作。

以下是HTML：值得注意的是我已经将此命名为我的另一次成功尝试=“活跃”

<div id="left-top-container">
        <ul id="selectionInfo">                    
            <li id="disc">Noiseproofing Joist Tape</li>
            <li id="compound">Compound</li>
            <li id="clip">Clip</li>
            <li id="sealant">Sealant</li>                    
        </ul>
    </div>
    <div id="left-bottom-container">                
        <ul id="buttons">
            <li id="discSelection" class="active"><a href="#disc">Disc</a></li>
            <li id="compoundSelection"><a href="#compound">Compound</a></li>
            <li id="clipSelection"><a href="#clip">Clip</a></li>
            <li id="sealantSelection"><a href="#sealant">Sealant</a></li>
        </ul>
    </div>

这是CSS：

#buttons
{ position:relative; left:-44px; top:-44px; }
#buttons li
{ float:left; list-style:none; }
#buttons li a
{ float:left; list-style:none; position:relative; text-indent:-9999px; }
#discSelection a
{ background: url(/Content/images/unhighlighted.png) no-repeat 0 0; height:88px; width:162px; padding:0; }
#discSelection a:hover, #discSelection a.active
{ background: url(/Content/images/tops.png) no-repeat 0 0; width:162px; height:106px; top:-13px; }
#compoundSelection a
{ background: url(/Content/images/unhighlighted.png) no-repeat -162px 0; height:88px; width:159px; padding:0; }
#compoundSelection a:hover, #compoundSelection a.active 
{ background: url(/Content/images/tops.png) no-repeat -162px 0; width:159px; height:106px; top:-13px; } 
#clipSelection a
{ background: url(/Content/images/unhighlighted.png) no-repeat -321px 0; height:88px; width:159px;  }
#clipSelection a:hover, #clipSelection a.active
{ background: url(/Content/images/tops.png) no-repeat -324px 0; width:159px; height:106px; top:-13px; }
#sealantSelection a
{ background: url(/Content/images/unhighlighted.png) no-repeat -480px 0; height:88px; width:159px; }
#sealantSelection a:hover, #sealantSelection a.active
{ background: url(/Content/images/tops.png) no-repeat -486px 0; width:159px; height:106px; top:-13px; }

这是JQuery脚本：

$(document).ready(function () {
$("#main-body-options a").click(function (e) {
    showSlide($(this).parent().index())
    return false;
});
$("#buttons a").click(function (e) {
    showSlide2($(this).parent().index())
    return false;
});
});

function showSlide2(index) {
$("#buttons.active li.active").removeClass("active")
$("#buttons li").eq(index).addClass("active")
$("ul#selectionInfo").animate({ top: -409 * index}, { duration:600, easing:"easeInOutQuint" })
}

如果我在任何地方都不清楚，请询问或编辑以使其更具可读性。

Answer 1

检查所有css和html，并将活动课程仅限于 a 元素

然后将你的jquery修改为：

$("#buttons a").click(function (e) {
   $("#buttons a").removeClass("active");
   $(this).addClass("active");
   showSlide2($(this).parent().index())
return false;
});

 function showSlide2(index) {
    $("ul#selectionInfo").animate({ top: -409 * index}, { duration:600, easing:"easeInOutQuint" })
 }

Answer 2

在CSS中，您已在 a 元素上定义.active类“#sentntSelection a .active。

我认为如果你改变它以适用于 li 元素，你的问题就会消失。

无法在HTML / CSS中设置活动按钮

2 个答案: