Question

我正在制作一个带有粘性导航的单页网站。我想要的是当单击选择菜单时，活动链接以不同颜色突出显示。这是我的jquery脚本：

$(document).ready( function () {
    var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
    $("#main-menuid li a").removeClass("current");
    $("#main-menuid li a[href='" + pathname  + "']").addClass("current");
});

我的导航HTML：

<div id="main-menuid">
<ul>
<li class="homnav"><a href="#home">Home</a></li>
<li class="abonav"><a href="#about">About</a></li>
<li class="mennav"><a href="#menu">Menu</a></li>
<li class="connav"><a href="#contact">Contact</a></li>
</ul>
</div>

我的班级CSS。当前：

.current {
    color: #F05454;
}

非常感谢。

Answer 1

您必须使用window.location.hash来获取#parameter

尝试使用以下代码。

   var pathname = window.location.hash;
    $("#main-menuid li a").removeClass("current");
    $("#main-menuid li a[href='" + pathname  + "']").addClass("current");

            jQuery("#main-menuid a").click(function(){
                 $("#main-menuid li a").removeClass("current");
                 $(this).addClass("current");
            })

});

Answer 2

由于它是哈希值，你可以在点击时突出显示。然后只过滤掉匹配的哈希并添加类onload（锚点与window.location具有相同的属性）：

var c = 'current';
$("ul a").click(function() {
    $(this).addClass(c).parent().siblings().children('.'+c).removeClass(c);
}).filter(function() {
    return this.hash == location.hash;
}).addClass(c);

http://jsfiddle.net/KL7QZ/

Jquery活动菜单荧光笔

2 个答案: