javascript - jQuery 没有执行一个事件，而是执行了 4 个相同的事件

Question

这是一个很大的布局，所以我将只发布链接到 jQuery 和 HTML 的部分(完整站点位于 http://www.gronge.com/index3.php)。一切正常，除了关于链接在 Firebug 检查中变回 .navBarActive 但视觉上没有变化。我是网页设计的新手，这是我目前遇到的第一个大问题。

jQuery

$(document).ready(function() {
    $("li.navBarNormal").click(function () {
        $("li.navBarActive").removeClass("navBarActive").addClass("navBarNormal");
        $(this).removeClass("navBarNormal").addClass("navBarActive");
    })
});

HTML

<ol id="navLinks"> 
    <li id="navLinkAbout" class="liNav fontWhite navBarActive">About</li>
    <li id="navLinkSubscribe" class="liNav fontWhite navBarNormal">Subscribe</li>
    <li id="navLinkNews" class="liNav fontWhite navBarNormal">News</li>
    <li id="navLinkUpdates" class="liNav fontWhite navBarNormal">Updates</li>
    <li id="navLinkContact" class="liNav fontWhite navBarNormal">Contact</li>
</ol>

Answer 1

这是因为您没有在 #navLinkAbout 节点上设置事件监听器，因为该节点没有开始的 navBarNormal 类。

我的建议是使用更好的选择器来设置监听器，例如 #navLinks li。

$(document).ready(function() {
    $("#navLinks li").click(function () {
        $("li.navBarActive").removeClass("navBarActive").addClass("navBarNormal");
        $(this).removeClass("navBarNormal").addClass("navBarActive");
    })
});