Jquery 活动菜单荧光笔答案

【问题标题】：Jquery Active Menu HighlighterJquery 活动菜单荧光笔
【发布时间】：2011-10-08 17:22:37
【问题描述】：

我正在制作一个带有粘性导航的单页网站。我想要的是当单击选择菜单时，活动链接以不同的颜色突出显示。这是我的 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>

还有我的 .current 类的 CSS：

.current {
    color: #F05454;
}

非常感谢。

【问题讨论】：

它根本不工作，我错过了什么吗？
在pathname 变量上尝试alert 或console.log - 你得到什么值？
遵循 ipr101 的建议，了解如何获取正确的路径名。或者只是使用 Firebug/Dev Tools 来查看 .current 是否已被应用！可能是该类在那里，但 CSS 不起作用，因为它没有足够高的特异性或其他东西。

标签： jquery highlighting

【解决方案1】：

由于它是哈希，您可能只需在点击时突出显示。然后只需过滤掉匹配的哈希并添加类 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/

【讨论】：

【解决方案2】：

您必须使用 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");
            })

});

【讨论】：