jquery导航突出显示

嗨我想在Jquery中编写一个脚本，自动选择主导航栏中的当前页面链接。该导航只是一个简单的UL这样的：jquery导航突出显示

<ul id="primaryNav"> 
    <li> 
     <a href="retail.html">Home</a> 
    </li> 
    <li> 
     <a href="vision.html">Our Vision</a> 
    </li> 
    <li> 
     <a href="context.html">Town in context</a> 
    </li> 
</ul>

我的Jquery到目前为止是这样的：

$('#primaryNav').find("a[href='"+window.location.href+"']").each(function(){ 
    $(this).addClass("selected"); 
});

这不工作，因为我觉得它的选择对整个URL，而我只需要它选择最后一部分，例如retail.html或vision.html，然后添加类.selected

任何人都可以请帮忙吗？提前致谢。

来源

2010-10-08 mtwallet

使用attribute ends-with selector是不是这里安全（的$=代替=），像这样：

$('#primaryNav').find("a[href$='"+window.location.href.split('/').pop()+"']") 
       .addClass("selected");

也没必要为.each()这里，只是打电话.addClass()将它添加到所有匹配的元素（即使你的例子应该有一个）。

来源

2010-10-08 11:17:41

感谢您的答复尼克。我修正了这个问题，但无法正常工作。一个例子可以在这里找到http://www.northlight-studios.co.uk/dev/standardLife/retail/retail.html我在这里错过了一些明显的东西吗？ – mtwallet 2010-10-08 11:30:53

@mtwallet - 在那里有一个大脑失效，添加了流行版本......它是以定位符的“href”结尾的'location.href' ......而不是其他方式。 – 2010-10-08 11:34:42

感谢您的帮助。任何机会，你可以运行我如何工作，并比较其他例子在这里，所以我可以从这个了解一点？ – mtwallet 2010-10-08 11:38:06

怎么样一个简单的子字符串？

var href = window.location.href; 
var htmlPageName = href.substring(href.lastIndexOf('/') + 1); 

$('#primaryNav').find("a[href='" + htmlPageName +"']").each(function(){ 
    $(this).addClass("selected"); 
});

来源

2010-10-08 11:17:45

再次感谢您的工作得很好。有什么机会可以解释这是如何工作的，并与@Arnaud F例子进行比较，这样我可以从中学到一些东西？ – mtwallet 2010-10-08 11:36:13

Sure-'href.lastIndexOf（'/'）+ 1'只是获得最后一次出现的索引（加1，所以我们将斜杠移到_past_）。将该索引作为起始索引传递给'href.substring（）'，将从url字符串（'href'）返回最后一个段（页面名称）。 – 2010-10-08 12:28:49

就像那个（立足于网页名称太）：

$('#primaryNav').find("a[href$='" + window.location.href.split("/").reverse()[0] + "']").addClass("selected");

来源

2010-10-08 11:27:30

非常感谢！你能解释一下你在那里做了什么吗？ – mtwallet 2010-10-08 11:33:18

'window.location.href.split（“/”）。reverse（）[0]'或'pop（）'而不是'.reverse（）[0]'分割当前位置和数组的最后一个元素是页面名称。一旦我们有页面名称，使用选择器$ =来找到你想要的链接。更多细节，请参阅选择器$ =的jQuery API – 2010-10-08 11:38:38

jquery导航突出显示

回答

相关问题