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

Answer 2

试试这个：http://jsfiddle.net/treyeckels/DgQfw/

将事件触发器更改为“li.liNav”。这将把事件处理程序应用于所有链接。然后对此进行添加/删除操作（已点击），遍历并找到兄弟姐妹并执行添加/删除操作。

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

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

2 个答案: