Question

一切！ Noob警报。当a的href值包含当前页面的结尾时，我正在尝试将类“active”添加到nav中列出项目。

例如，如果我在“http://www.website.com/about/overview/”，我希望包含带有href为“/ overview /”的a的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>

我想我可以像这样抓住当前网址的结尾

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;

Answer 2

var url = 'window.location.href';

这是字符串，你总是会在这行中获得“window.location.href”

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

这是不正确的，你需要获得当前路径

 var url = window.location.href;

您需要将此变量添加到选择器

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

你可以这样做

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

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

2 个答案: