如何使用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>

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

Answer 1

只需删除 else 中的类：

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

Answer 2

改变

if (window.location.href.includes(text)) {
  $('ul.nav.navbar-nav.side-nav.nicescroll-bar li a').addClass('active')
}

进入

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

Answer 3

当您使用它来添加类时，它会起作用。 我将一个 href 更改为 stack，因为代码片段的 href 类似于 stacksnippet。 对于该元素，它的颜色为红色。

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

 .active { color: red; }

 <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="stack">base</a></li> <li><a href="test">test</a></li> </ul>

Answer 4

您可以简化选择器和代码并使用.filter()而不是.each()

$('ul.navbar-nav li a').filter(function(){
  return window.location.href.includes($(this).attr('href'));
}).addClass('active');

 window.location.href = "#home"; $('ul.navbar-nav li a').filter(function(){ return window.location.href.includes($(this).attr('href')); }).addClass('active');

 .active {color:red}

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