I have a nav bar with links that are loaded from a database by a foreach loop, the nav bar is static so only the content in changing. I want to add an 'Active' class to the link when the page is loaded an active.

I've tried to simply add class when an li element is clicked, but the class disappears when the page is reloading.

Here is my HTML (it's rendered by PHP foreach loop so it's not hard coded as it looks)

<div class="sidebar-menu">
  <ul class="sidebar-nav">
    <li class="icon_links">
      <a href="/home" class="links">
        <div class="icon">
          <i class="fa fa-tasks" aria-hidden="true"></i>
        </div>
        <div class="title">Dashboard</div>
      </a>
    </li>
    <li class="icon_links">
      <a href="/messaging" class="links">
        <div class="icon">
          <i class="fa fa-comments" aria-hidden="true"></i>
        </div>
        <div class="title">Messaging</div>
      </a>
    </li>
  </ul>
</div>

JavaScript

$(document).ready(function() {
  var selector = '.sidebar-nav li';
  $(selector).on('click', function() {
    $(selector).removeClass('active');
    $(this).addClass('active');
  });
});

I have a nav bar with links that are loaded from a database by a foreach loop, the nav bar is static so only the content in changing. I want to add an 'Active' class to the link when the page is loaded an active.

I've tried to simply add class when an li element is clicked, but the class disappears when the page is reloading.

Here is my HTML (it's rendered by PHP foreach loop so it's not hard coded as it looks)

<div class="sidebar-menu">
  <ul class="sidebar-nav">
    <li class="icon_links">
      <a href="/home" class="links">
        <div class="icon">
          <i class="fa fa-tasks" aria-hidden="true"></i>
        </div>
        <div class="title">Dashboard</div>
      </a>
    </li>
    <li class="icon_links">
      <a href="/messaging" class="links">
        <div class="icon">
          <i class="fa fa-comments" aria-hidden="true"></i>
        </div>
        <div class="title">Messaging</div>
      </a>
    </li>
  </ul>
</div>

JavaScript

$(document).ready(function() {
  var selector = '.sidebar-nav li';
  $(selector).on('click', function() {
    $(selector).removeClass('active');
    $(this).addClass('active');
  });
});

• javascript
• php
• jquery
• html

• Of course, li will not have the active class while reloading. On click only it will add class (As per your code.). Do you want to keep highlight the same li, on reload of the page? – Samir Commented Nov 9, 2016 at 12:13
• You would need to select it on page load. It is a common question on how to do it, hopefully someone can find a dupe. – epascarello Commented Nov 9, 2016 at 12:16
• Initially you have to active class to current li using PHP. – Nil Commented Nov 9, 2016 at 12:23

6 Answers 6

You need to do something like this:

    var selector = '.sidebar-nav li';
    var url = window.location.href;
    var target = url.split('/');
     $(selector).each(function(){
        if($(this).find('a').attr('href')===('/'+target[target.length-1])){
          $(selector).removeClass('active');
          $(this).removeClass('active').addClass('active');
        }
     });

I hope it helps

Function below add class active to all links that lead to current page you are on.

$(function(){
       $("a").each(function(){
               if ($(this).attr("href") == window.location.pathname){
                       $(this).addClass("active");
               }
       });
});

Source https://css-tricks.com/snippets/jquery/highlight-all-links-to-current-page/

For what I understood from you context you try to dynamicaly set a class to a dom element while reloading your page?

The thing is that while using direct links / form (with normal behaviour) you will reload the current page (or moving to a new one) which unset your currents modification and get your page back as it was in the first place.

I do think you should either: use an iframe inside your page that would be the only part of your page that is reloaded.
Or using ajax, you replace the section containing your current page's content with the new page's content

You can use $(selector).toggleClass('active'); $(this).addClass('active');

I use the simple way

<script>
        var header = document.getElementById("ActiveId");
        var btn = header.getElementsByClassName("btn");
        for (var i = 0; i < btn.length; i++) {
            btn[i].addEventListener("click", function () {
                var current = document.getElementsByClassName("active");
                current[0].className = current[0].className.replace(" active", "");
                this.className += " active";
            });
        }
    </script>

I hope it's help someone

// add this code direct in your js file in line : 0

var url = window.location.href;
var tg = url.split('/');

    jQuery('.navbar-light .navbar-nav .nav-link').each(function(){

        url_this = jQuery(this).attr("href");
        var ts = url_this.split('/');


            if(decodeURIComponent(tg[tg.length -2]) === decodeURIComponent(ts[ts.length -1]) ){
                jQuery(this).addClass('active');
                return false;
            }else{
                if(decodeURIComponent(tg[tg.length -2]) === decodeURIComponent(ts[ts.length -2]) ){
                    jQuery(this).addClass('active');
                    return false;
                }
            }


    });