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?

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?

• javascript
• html
• twitter-bootstrap
• dom

• 2 Possible duplicate of How to getElementByClass instead of GetElementById with Javascript? – kulaeff Commented Aug 11, 2017 at 14:54
• It couldn't be the first time ever someone asked this question. – Jeremy Thille Commented Aug 11, 2017 at 14:54
• ` I now want to change this programatically when navigating to the different links` How do you want to change it ? – Jason Krs Commented Aug 11, 2017 at 14:55
• @JeremyThille New ers never try to look for old answers before posting. I did that a lot too ;-) – Jason Krs Commented Aug 11, 2017 at 14:56
• @JasonKrs I thought I could give each an ID and then check if the ID matches the page name but (1) I'd have to give them all an ID just for that and (2) would have to include a script in every different page just for that check. Seemed like a lot of work and for something I take to be mon use, just thought there should be a simpler way. – mcansado Commented Aug 11, 2017 at 14:59

4 Answers 4

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>

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');
})

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>

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.