javascript - 我怎样才能给菜单项激活类

Question

我有以下 HTML 代码段:

<div class="w-nav-item-h" id="mydiv">
<a class="w-nav-anchor level_1" href="/english/about-us/word-from-the-chairman">
<span class="w-nav-title">Word from the Chairman</span>
</a>
</div>

我想根据带有以下 JavaScript 代码的页面网址，为“mydiv”标识的 div 指定“active”类:

<script type="text/javascript">
            $(function () {

                $("#mydiv").removeClass('active');

                var lnk = window.location.href;
                lnk = lnk.toLowerCase();
                $("#mydiv a").each(function (index) {
                    if (lnk.indexOf($(this).html().trim().toLowerCase().replace(" ", "-")) != -1) {
                        $(this).parent().addClass('active');
                    }
                });
            });
      </script>

不幸的是，它不起作用。请帮我找到一个好的解决方案。

Answer 1

您需要使用replace与 regular expression to .replace 将始终替换第一个匹配项，除非您使用正则表达式。

还可以使用.text()而不是.html()来查找 anchor 的文本。即主席的话

代码

$(function () {
    $("#mydiv").removeClass('active');
    var lnk = window.location.href;
    lnk = lnk.toLowerCase();
    $("#mydiv a").filter(function (index) {
        var thisText = $(this).text().trim().toLowerCase().replace(/ /g, '-');
        return lnk.indexOf(thisText) > -1;
    }).parent().addClass('active');
});

DEMO ，在示例中，我对 url 使用了硬编码文本