Question

我正在尝试将active类添加到链接中，但我无法使其正常工作。

假设我有以下HTML：

<ul class="nav navbar-nav">
    <li class="menu_li"> <a href="http://192.168.215.248/public">Home</a>
    </li>
    <li class="menu_li dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" style="cursor: pointer;">Partijen<span class="caret"></span> </a>
        <ul class="dropdown-menu" role="menu">
            <li> <a href="http://192.168.215.248/public/partijen/1">Actief</a>
</li>
            <li> <a href="http://192.168.215.248/public/partijen/0">Inactief</a>
            </li>
            <li class="divider"></li>
            <li> <a href="http://192.168.215.248/public/telers">Telers</a>
            </li>
            <li> <a href="http://192.168.215.248/public/handelshuis">Handelshuis</a>
            </li>
            <li> <a href="http://192.168.215.248/public/ras">Ras</a>
            </li>
            <li> <a href="http://192.168.215.248/public/klasse">Klasse</a>
            </li>
            <li> <a href="http://192.168.215.248/public/perceel">Perceel</a>
            </li>
            <li> <a href="http://192.168.215.248/public/maat">Maat</a>
            </li>
            <li> <a href="http://192.168.215.248/public/behandeling">Behandeling</a>
            </li>
        </ul>
    </li>
    <li class="menu_li"> <a href="http://192.168.215.248/public/bewaarplaatsen">Bewaarplaatsen</a>
    </li>
    <li class="menu_li"> <a href="http://192.168.215.248/public/proin">Product in</a>
    </li>
    <li class="menu_li"> <a href="http://192.168.215.248/public/proout">Product uit</a>
    </li>
    <li class="menu_li"> <a href="http://192.168.215.248/public/taken">Taken</a>
    </li>
    <li class="menu_li"> <a href="http://192.168.215.248/public/historie">Historie</a>
    </li>
</ul>

我有以下JS：

$(function () {
    var url = window.location.href.replace(/\/$/, '');
    console.log("url: " + url);
    // now grab every link from the navigation
    $('.menu_li a').each(function () {
        console.log("this href: " + this.href);
        if (this.href.indexOf(url) > 0) {
            console.log("Hit!");
            $(this).parent().addClass('active');
        }
    });

});

假设我已导航到此网址：

http://192.168.215.248/public/taken

然后我不想将active类添加到此元素上：

<li class="menu_li"> <a href="http://192.168.215.248/public/taken">Taken</a></li>

但那不会发生......我得到的输出是：

url: http://192.168.215.248/public/taken
this href: http://192.168.215.248/public
this href:
this href: http://192.168.215.248/public/partijen/1
this href: http://192.168.215.248/public/partijen/0
this href: http://192.168.215.248/public/telers
this href: http://192.168.215.248/public/handelshuis
this href: http://192.168.215.248/public/ras
this href: http://192.168.215.248/public/klasse
this href: http://192.168.215.248/public/perceel
this href: http://192.168.215.248/public/maat
this href: http://192.168.215.248/public/behandeling
this href: http://192.168.215.248/public/bewaarplaatsen
this href: http://192.168.215.248/public/proin
this href: http://192.168.215.248/public/proout
this href: http://192.168.215.248/public/taken
this href: http://192.168.215.248/public/historie

Here's an JSFiddle

正如你所看到的，我应该受到打击。我没有使用if(url == hrefurl)核对的原因是因为导航网址也可以是：

http://192.168.215.248/public/taken/edit/200
or
http://192.168.215.248/public/taken/nieuw

等等。

我有一种感觉，我必须用正则表达式做一些事情，但我不是JS的专家，更不用说正则表达式了....

那么有人知道如何让这件JS工作吗？

Answer 1

如果找到字符串，则与indexOf的匹配会将输出显示为0;否则-1，

所以条件应该是

if (this.href.indexOf(url) > -1)

<强> Updated Fiddle

JQuery将类添加到活动链接

1 个答案: