时间戳

首页 > 解决方案 > 如何根据 url 添加“活动”类到下拉列表

javascript - 如何根据 url 添加“活动”类到下拉列表

问题描述

我当前的网址是http://localhost/app/home，我有这个导航：

<li class="dropdown">
  <a href="#" class="nav-link has-dropdown" data-toggle="dropdown">
    <i class="fas fa-list"></i> 
    <span>Outlook</span>
  </a>
  <ul class="dropdown-menu" style="display: block;">
    <li><a class="nav-link" href="/home"><span>Sales</span></a></li>
    <li><a class="nav-link" href="/"><span>Product</span></a></li>
    <li><a class="nav-link" href="/"><span>Channel</span></a></li>
  </ul>
</li>

我所期望的：

<li class="dropdown active">
  <a href="#" class="nav-link has-dropdown" data-toggle="dropdown">
    <i class="fas fa-list"></i> 
    <span>Outlook</span>
  </a>
  <ul class="dropdown-menu" style="display: block;">
    <li class="active"><a class="nav-link" href="/home"><span>Sales</span></a></li>
    <li><a class="nav-link" href="/"><span>Product</span></a></li>
    <li><a class="nav-link" href="/"><span>Channel</span></a></li>
  </ul>
</li>

我需要active在下拉列表中添加一个类li，并ul li基于当前 URL。jQuery有什么简单的解决方案吗？

标签： javascriptjqueryhtml

解决方案

您可以使用此功能检查 href 属性是否在当前 URL 中。

$(".dropdown-menu a").each(function() {
    let href = $(this).attr('href');

    if (window.location.href.indexOf(href)) {
        $(this).parent('li').addClass('active');
    }
});

请注意，'/' 将始终为真。

推荐阅读