jquery - 无法在 HTML/CSS 中设置事件按钮

Question

我对使用 HTML 和 CSS 非常陌生，并且在让按钮显示它们处于事件状态时遇到了一些麻烦(即默认情况下，button1 具有替代颜色以显示其已被选中)。当他们点击 button2 时，上面的内容发生变化(成功)，然后 button2 应该成为事件的。

但是，目前，我什至无法让 button1 成为默认事件状态。我已在页面的其他地方成功完成此操作。

这是 HTML:值得注意的是我在这个类中的另一个成功尝试也命名为“active”

<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" })
 }