How to change element's class to active?

Question

I'm using a bootstrap template for a side navbar as a partial in EJS which is then included on all pages that use it. Is was taken from their Dashboard template . The HTML is

<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
  <ul class="nav nav-pills flex-column">
    <li class="nav-item">
      <a class="nav-link active" href="/profile">Overview</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/accountdetails">Account Details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/admin">Admin</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/transactions">Transactions</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/contract">Contract</a>
    </li>
  </ul>
</nav>

Whichever link has the active class has particular styling with darker blue in the background. I now want to change this programatically when navigating to the different links.

They're all going to different pages so I could just change there the issue is that I'm including the whole sidebar code as an EJS partial so that wouldn't work. I also tried this answer but it didn't work (flashes the active styling but disappears - probably because it is routing to another page?).

There are plenty of questions here about changing an HTML element programatically but they usually use document.getElementById which seems like too much work (giving each an ID, checking all, etc). Is there a quicker / correct way of doing this?

Answer 1

You could do the following:

• Set a click event on .nav-item , to add .active class.
• Remove .active class from any other sibling element.

 $('.nav-item').on('click', function() { $(this).addClass('active').siblings('li').removeClass('active'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar"> <ul class="nav nav-pills flex-column"> <li class="nav-item active"> <a class="nav-link" href="#">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Account Details</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Admin</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Transactions</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contract</a> </li> </ul> </nav> 

Answer 2

Some people answering are a bit confused, thinking you are staying on the same page, and changing the class of your <a> tags. But I think your clicks on these navigate to new pages, and you want the appropriate <a> to have class active when the page loads.

This might help:

<script>
    var path = location.pathname; // ex: '/profile';
    var activeItem = document.querySelector("a[href='" + path + "']");
    activeItem.class += ' active';
</script>

And of course with jquery it's even easier:

$(function() {
    var path = location.pathname;
    $("a[href='" + path + "']").addClass('active');
})

Answer 3

This is a code for helping you.

 <nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Account Details</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Admin</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Transactions</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contract</a> </li> </ul> </nav> <script type="text/javascript"> $(function () { $(".nav-item").click(function () { $(".nav-item").each(function () { $(this).find("a").removeClass("active"); }); $(this).find("a").addClass("active"); }); }); </script> 

Answer 4

If your using EJS you can probably do something like the following

<a class="nav-link<% if (page_name === 'profile') { %> active<% } %>" href="/profile">Overview</a>

This is untested but should get you going on the right path. Just do a if statement using EJS's syntax to check if you are on the correct page and add the word active.