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

每当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>

下面部分代码从所有菜单中高亮显示，而我希望当任何用户在新的详细信息页面上时，新闻菜单都会高亮显示

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

---

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

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

到

试试这个代码

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

---

希望这是你想要的

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

---

@k、 我尝试了这两个选项，但它仍然突出显示所有菜单项，出于某种原因，它匹配所有URL。@学习检查更新的答案。您还需要在迭代时检查锚点的属性。当用户在新闻链接上时，第二个if循环始终为true。这不会突出显示任何内容。我用您的代码替换我的代码，所有菜单项都返回false。您的代码在fiddle中工作，但在localhost上失败不确定是什么导致了问题，它应该工作，我复制粘贴的代码，并用window.location.href以及window.location.pathname替换示例url。首先从HTML中删除.active链接。@Hikarunomemory，我尝试了$.main nav li a.removeClassactive-link；事实并非如此work@Learning他想手动从HTML中删除这些类。@KK，对不起，我的错误是从HTML复制粘贴的代码时忘记了从问题中删除它。在实际代码中没有活动的链接类，我只使用javascript添加它，如图所示。这突出显示了所有菜单项。元素只是此对象的替代项。在条件匹配后尝试返回false，我已更新了应答菜单本身中没有子元素，由于这个原因，我试图将其作为字符串匹配，如果window.location.href.indexOf'/news/'

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

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