javascript - 如何根据其子 href 将事件的 css 类应用于 li

Question

我有以下标记来显示导航菜单:

<ul class="nav sf-menu">
    <li><a href="@Url.Action("Index","Home")">Home<span></span></a></li>

现在我想添加 active类到 li如果当前 URL 等于它的 <a>引用资料

我尝试了以下方法:

$(function () {

    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
    // now grab every link from the navigation
    $('.sf-menu li').each(function () {
        // and test its normalized href against the url pathname regexp
        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $(this).addClass('active');
        }
    });

});

但我得到一个错误 li没有 href .我如何让它发挥作用？

Answer 1

<a> 上存在 href 属性元素，而不是 <li>元素。您需要检查 <a>对于 href，然后将该类应用到父类 <li> .

以下是我如何调整您的代码以针对 <a>标签:

jQuery(function () {
    var url = window.location.pathname;

    if (url == '/') {
        jQuery('.sf-menu li > a[href="/"]').parent().addClass('active');
    } else {
        var urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
        jQuery('.sf-menu li > a').each(function () {
            if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
                jQuery(this).parent().addClass('active');
            }
        });
    }
});

JSFiddle

我还检查了链接是否为 /以防止所有链接都被标记为事件。

如果您的链接适用，您也可以尝试这个简化版本:

jQuery(function () {
    var url = window.location.pathname;
    jQuery('.sf-menu li > a[href="' + url + '"]').parent().addClass('active');
});