javascript - 如果部分 url 匹配，则突出显示父菜单

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>

有些页面有子页面，例如新闻页面有新闻详细信息页面和

new page = /en/news/

new details page = /en/news/xxx/title-of-the-news-what-ever-it-is

所以我想突出显示父菜单新闻，即使其中一个位于新闻详细信息页面上

 $(".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");
        }
    });

下面的代码部分从所有菜单中突出显示，而我希望当用户位于新的详细信息页面时突出显示新闻菜单

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");
}