javascript - 根据最终 URL 路径段将类添加到列表项

Question

全部!菜鸟警报。当 a 的 href 值包含当前页面的结尾时，我试图将类“active”添加到导航栏中的列表项。

例如，如果我在“http://www.website.com/about/overview/”上，我希望包含 href 为“/overview/”的 li 激活该类。

<ul>
    <li><a href="http://www.website.com/about/overview/">Overview</a></li>
    <li><a href="http://www.website.com/about/staff/">Staff</a></li>
    <li><a href="http://www.website.com/about/membership/">Membership</a></li>
</ul>

如果我将“lastSegment”更改为“/overview”，下面的脚本会起作用，但我需要脚本是动态的并获取当前 url 的结尾。

<script type='text/javascript'>

$(function () {


    $("ul > li a[href*='lastSegment']").closest('li').addClass('active');

});

</script>

我想我可以像这样抓取当前 url 的结尾

var url = 'window.location.href';
var lastSegment = url.split('/').pop();

但我显然不知道如何在第一个脚本中使用“lastSegment”变量。有什么想法吗？

Answer 1

欢迎来到 Stack Overflow。

如果您将选择器更改为 $("ul > li a[href$='"+ lastSegment + "']")，该部分将起作用。

但是你也得改

var url = 'window.location.href';

到

var url = window.location.href;