I want to have a jQuery dynamic menu that navigates to the <a></a> tags and the one that include with the page 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=".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>

I want to have a jQuery dynamic menu that navigates to the <a></a> tags and the one that include with the page 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./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>

In this code, there is a color change in all menus, which should change the color of the menu according to the page's address.

• javascript
• jquery
• html
• anchor

Share Improve this question Follow edited Oct 30, 2019 at 10:06 Arman Bagheri asked Nov 21, 2018 at 12:17 Arman BagheriArman Bagheri 63011 gold badge88 silver badges2020 bronze badges 2

• 1 What is question? It doesn't work? – Mohammad Commented Nov 21, 2018 at 12:20
• This code is not required by me. I want a code to color the case that links to the page address or adds a class to it. – Arman Bagheri Commented Nov 21, 2018 at 12:22

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Just remove the class in else:

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

Change

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

into

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

It works when you use this to add the class. I changed one href to stack because the href of the snippet is something like stacksnippet. For that element it colors red.

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

You can simplify your selector and code and use .filter() instead of .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./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>