Question

只要URL的一部分与主URL匹配，我都希望突出显示父菜单

主要导航如下

<ul class="main-nav">
    <li> <a href="/en/" data-subnav="home-subnav" class="mm-nav-item"> HOME  </a> </li>
    <li> <a href="/en/latest/" data-subnav="newissue-subnav" class="mm-nav-item"> LASTEST UPDATES  </a> </li>
    <li> <a href="/en/categories/" data-subnav="categories-subnav" class="mm-nav-item"> CATEGORIES  </a> </li>
    <li> <a href="/en/news/" data-subnav="news-subnav" class="mm-nav-item"> NEWS  </a> </li>
    <li> <a href="/en/contact-us/" data-subnav="contact-subnav" class="mm-nav-item"> CONTACT US  </a> </li>
</ul>

，某些页面包含子页面，例如新闻页面具有新闻详细信息页面和

的网址

新页面= / en / news /

新详细信息页面= / en / news / xxx /新闻标题-一切都有

所以我想突出显示父菜单News，即使一个人在新闻详细信息页面上

 $(".main-nav li a").each(function () {
        //this part works when url matches
        if (this.href == window.location.href) {
            $(this).addClass("active-link");
        }

        //this part u want to match when part of url matchs
        if (window.location.href.indexOf('/news/') > 0) {
            $(this).addClass("active-link");
        }
    });

所有用户都在新的详细信息页面上时，我希望突出显示news菜单时，所有菜单的代码高亮部分下方

if (window.location.href.indexOf('/news/') > 0) {
            $(this).addClass("active-link");
        }

Answer 1

您可以尝试从以下位置修改代码：

if (window.location.href.indexOf('/news/') > 0) {
        $(this).addClass("active-link");
    }

到

if (window.location.href.indexOf('/news/') > -1&&this.href.indexOf("/news/")>-1) {
      $(this).addClass("active-link");
}

Answer 2

尝试此代码

$(".main-nav li a").each(function (index, element) {
    //this part works when url matches
    if (element.href == window.location.href) {
        $(element).addClass("active-link");
        return false;
    }

    //this part u want to match when part of url matchs
    if (window.location.href.indexOf('/news/') > 0) {
        $(element).addClass("active-link");
        return false;
    }
});

Answer 3

希望这就是您想要的

$(".main-nav li a").each(function (e) {
        //this part works when url matches
       var attr = $(this).attr('href').toString();
        console.log(attr)
        //this part u want to match when part of url matchs
        if (window.location.href.indexOf(attr) > -1) {
            $(this).addClass("active-link");
//To highlight parent use $(this).parent('li').addClass("active-link");
        }
    });

如果部分网址匹配，则突出显示父菜单

3 个答案: