Comment ajouter une classe spécifique à une balise d'ancrage dont le href est égal à l'URL en utilisant jquery ?

Question

Je souhaite avoir un menu dynamique jQuery qui navigue vers la page <a></a> et celle qui inclut l'URL de la page.

$('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>

Dans ce code, il y a un changement de couleur dans tous les menus, qui devrait changer la couleur du menu en fonction de l'adresse de la page.

Answer 1

Il suffit de supprimer la classe dans else :

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

Answer 2

Changer

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

en

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

Answer 3

Cela fonctionne lorsque vous utilisez ceci pour ajouter la classe. J'ai changé un href en stack parce que le href du snippet est quelque chose comme stacksnippet. Cet élément est coloré en rouge.

$('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

Vous pouvez simplifier votre sélecteur et votre code et utiliser .filter() au lieu de .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>