Jquery活动菜单荧光笔

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

非常感谢。

来源

2011-10-08 jmc

它不工作，我错过了什么？ – jmc

在你的'pathname'变量上尝试'alert'或'console.log' - 你得到了什么值？ – ipr101

按照ipr101的建议查看获取正确的路径名。或者只是使用Firebug/Dev Tools来查看是否已应用.current！有可能是班级在那里，但CSS不起作用，因为它没有足够高的特异性或某些东西。 –

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

});

来源

2011-10-08 08:53:29 Amila

这只有在每个页面都用散列指定时才有效。 –

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

来源

2011-10-08 09:05:33 David

Jquery活动菜单荧光笔

回答

相关问题