Question

您好我正在尝试在Jquery中编写一个脚本，自动选择主导航中的当前页面链接。导航只是一个简单的UL：

<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");
});

这不起作用，因为我认为它选择整个网址，而我只需要选择最后一部分，例如retail.html或vision.html然后添加类.selected

有人可以帮忙吗？提前谢谢。

Answer 1

使用attribute ends-with selector来保证安全（$=代替=），如下所示：

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

此处也不需要.each()，只需调用.addClass()即可将其添加到所有匹配的元素中（即使您的示例中应该有一个）。

Answer 2

就像那样（基于页面名称）：

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

Answer 3

简单子字符串怎么样？

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

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

jquery导航突出显示

3 个答案: