Question

我的菜单在这里：

<ul>
    <li class="step-1"><a href="/why-build">Why Build</a></li>
    <li class="step-2"><a href="/land">Land</a></li>
    <li class="step-3"><a href="/builders">Builders</a></li>
</ul>

当我在该页面上（即/ why-build）或其子页面（即/ why-build / page1，或/ why-build / page2等）时，我试图将“selected”类添加到菜单项）。第一个李将是

<li class="step-1 selected"><a href="/why-build">Why Build</a></li>

所以基本上所有网址都匹配模式/ why-build / *。我如何检查window.location.pathname？对不起，我不擅长正则表达式。欢呼声。

Answer 1

使用.filter()将路径名的开头与href匹配。

$("li").removeClass("selected");
$("li > a").filter(function() {
    return window.location.pathname.indexOf($(this).attr('href')) == 0;
}).parent().addClass("selected");

这假设您不会像文件夹/why-build和/why-build2那样愚蠢。我可以使它更安全，在路径名中显式搜索/，然后比较子字符串，或使用正则表达式。如果您需要，请将其视为学习练习。

Answer 2

使用以下内容匹配

HTML ：

<ul>
    <li class="step-1"><a href="/why-build">Why Build</a></li>
    <li class="step-1"><a href="/why-build/page1">Why Build</a></li>
    <li class="step-2"><a href="/land">Land</a></li>
    <li class="step-3"><a href="/builders">Builders</a></li>
</ul>

脚本：

$("li").removeClass("selected");
$("a[href*='why-build']").parent('li').addClass("selected");

以下是属性选择器的符号表示法：

= is exactly equal
!= is not equal
^= is starts with
$= is ends with
*= is contains

以下是工作演示：http://jsfiddle.net/MbGE2/

有关详细信息，请参阅：jQuery selectors

jquery匹配前缀window.location.pathname

2 个答案: