jquery导航高亮

发布于 2024-09-27 03:12:52 字数 680 浏览 3 评论 0原文

您好，我正在尝试在 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");
});

这不起作用，因为我认为它选择整个 URL，而我只需要它选择最后一部分，例如 Retail.html 或 Vision.html 然后添加班级 .selected

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

原文

Hi I am trying to write a script in Jquery that auto selects the current page link in the main nav. The nav is just a simple UL like this:

<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>

My Jquery so far looks like this:

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

This doesn't work because I think its selecting the whole URL whereas I just need it to select the last part e.g retail.html or vision.html then add the class .selected

Can anyone please help? Thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薄荷港 2024-10-04 03:12:52

使用属性结尾选择器在这里是安全的 ($= 而不是 =），如下所示：

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

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

Use an attribute ends-with selector to be safe here instead ($= instead of =), like this:

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

Also no need for a .each() here, just calling .addClass() will add it to all matched elements (even though there should be one for your example).

回复收藏 0 原文

对你的占有欲 2024-10-04 03:12:52

像这样（也基于页面名称）：

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

Like that (basing on page name too):

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

回复收藏 0 原文

谜兔 2024-10-04 03:12:52

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

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

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

What about a simple substring?

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

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

回复收藏 0 原文

~没有更多了~