javascript - 如何使用jquery将特定类添加到锚标记的href等于URL？

Question

我想要一个 jQuery 动态菜单，它可以导航到<a></a>标签和包含在页面 URL 中的标签。

$('ul.nav.navbar-nav.side-nav.nicescroll-bar li').find('a').each(function() {
  var text = $(this).attr("href");
  if (window.location.href.includes(text)) {
    $('ul.nav.navbar-nav.side-nav.nicescroll-bar li a').addClass('active')
  } else {}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav side-nav nicescroll-bar" style="overflow: hidden; width: auto; height: 100%;">
  <li><a href="home">home</a></li>
  <li><a href="dashboard">dashboard</a></li>
  <li><a href="base">base</a></li>
  <li><a href="test">test</a></li>
</ul>

在这段代码中，所有菜单都有颜色变化，应该根据页面的地址来改变菜单的颜色。

标签： javascriptjqueryhtmlanchor

Answer 1

只需删除 else 中的类：

if (window.location.href.includes(text)) {
  $(this).addClass('active')
} else {
  $(this).removeClass('active')
}