jquery - jQuery，突出显示活动菜单项

Question

我正在尝试为我的导航制作 jQuery 以突出显示活动菜单项（我的菜单是使用精灵制作的。）手动将 class="active" 添加到菜单项之一，突出显示工作。但是使用我的 jQuery 代码，什么也没有发生......

任何想法如何解决这个问题？

这是问题的演示小提琴。http://jsfiddle.net/wvEBw/1/

HTML：

<nav>
    <ul>
        <li><a href="#" id="btn1"></a></li>
        <li><a href="#" id="btn2" class="active"></a></li>
    </ul>
</nav>

CSS：（动画精灵）

//...

/* sprite menu animations */

nav a#btn1 {
    background-position:0px 0px;
    width:82px;
}

nav a#btn1:hover {
    background-position:0px -82px;
}

nav a#btn1.active {
    background-position:0px -164px;
}

nav a#btn2 {
    background-position:-108px 0px;
    width:82px;
}

nav a#btn2:hover {
    background-position:-108px -82px;
}

nav a#btn2.active {
    background-position:-108px -164px;
    outline: none;
}

jQuery：

$("nav li").click(function() {
    $("nav li a.active").removeClass("active"); //Remove any "active" class  
    $("a", this).addClass("active"); //Add "active" class to selected tab  

    $(activeTab).show(); //Fade in the active content  
    return false;
}

Answer 1

您忘记在 Fiddle 中添加 jQuery 库
并正确关闭您的函数});

http://jsfiddle.net/wvEBw/3/

$("nav li").click(function ( e ) {
    e.preventDefault();
    $("nav li a.active").removeClass("active"); //Remove any "active" class  
    $("a", this).addClass("active"); //Add "active" class to selected tab  

    // $(activeTab).show(); //Fade in the active content  
});

这篇文章也可能很有趣：停止滥用 Return False
这里是 DOCS 的快速浏览：event.preventDefault

Answer 2

您还可以根据导航 href 值突出显示基于当前 url 的导航。这种方式在重定向和直接跳转到主页时更有效。考虑这个例子：

$(document).ready(function($) {
    function markNavActive(){
        var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
        var listLinks = $('nav a');

        listLinks.each(function() {
            if ($(this).attr('href') == filename) {
                // alert(filename);
                $(this).addClass('active');
                return;
            }
            if (filename == "") {
                // alert(filename);
                $('.nav a[href="index.php"]').addClass('active');
                return;
            }
        });
    }
    markNavActive();    
});