Javascript Add Class Active When Click a Link After Load Another Page

Add active class after page loading

You can check if the url has the href or not then you can trigger the click event for the <a> which has matched href ..

Try the next code

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
    <li class="nav-item">
         <a class="nav-link" href="{{url('/account')}}" target="_blank">
             <i class="fas fa-fw fa-tachometer-alt"> account</i>
         </a>
    </li>
</ul>


$(document).ready(function(){
    $(".nav-item a").on("click", function(){  
         $(".nav-item.active").removeClass("active");  
         $(this).parent().addClass("active");
    }).filter(function(){
        return window.location.href.indexOf($(this).attr('href').trim()) > -1;
    }).click();
});

Note about the code above ^^^^^:

The code above won't work as expected IF you have url http://website.com/account/thing and you have two <a> with hrefs /account and /account/thing both of <a> will get selected

To avoid this you can use data attribute

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
    <li class="nav-item">
         <a class="nav-link" href="{{url('/account')}}" data-href="http://website.com/account" target="_blank">
             <i class="fas fa-fw fa-tachometer-alt"> account</i>
         </a>
    </li>
</ul>


$(document).ready(function(){
    $(".nav-item a").on("click", function(){  
         $(".nav-item.active").removeClass("active");  
         $(this).parent().addClass("active");
    }).filter(function(){
        return window.location.href == $(this).attr('data-href').trim();
    }).click();
});

Note about the code above ^^^^^:

In <a> add data-href="http://website.com/account" replace http://website.com/account with the full url

Add active class to link with current page

You can test this code with your real urls.

Retrieving the last valid "word" (in \abc\page1 is page1 or in \xyz\page1\ is page1) for both url, page and menu item url. Finally I make the comparison between the two.

One more thing that would be done, remove any hashes (url\page#abc) and parameters (url\page?Param=value)

jQuery(function($) {
  var window_location_href = 'http://your.site.com/parent/page2/';
  window_location_href = window_location_href.endsWith('/') ? window_location_href.substr(0, window_location_href.length - 1) : window_location_href;
  var pgurl = window_location_href.substr(window_location_href.lastIndexOf("/") + 1);


  $(".menu-item > a").each(function() {
    var thisPage = $(this).attr("href");
    thisPage = thisPage.endsWith('/') ? thisPage.substr(0, thisPage.length - 1) : thisPage;
    thisPage = thisPage.substr(thisPage.lastIndexOf("/") + 1);

    if (thisPage == pgurl)
      $(this).addClass("active");
  });

});

.menu-link {
  color: blue;
  display: block;
}

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
  ...
  <div class="menu-item">
    <a href="/complexPath/parent/page1/" class="menu-link"> Page1 </a>
    <a href="/complexPath/parent/page2/" class="menu-link"> Page2 </a>
    <a href="/complexPath/parent/page3/" class="menu-link"> Page3 </a>
  </div>
  ...
</div>

Adding class to li after page is loaded

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

Add active class after page load

try this,

<div class="nav">
    <ul id="menu">
        <li><a href="/item1" class="active">item1</a></li>
        <li><a href="/item2">item2</a></li>
        <li><a href="/item3">item3</a></li>
    </ul>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
document.onreadystatechange = function(){
    var selected_parent;
    if(document.readyState === 'interactive'){
        selected_parent = $('#menu').children().find('a').filter('.active').parent('li').index();
        jQuery.data( document.body, "selected_parent", selected_parent);       
    }
    if(document.readyState === 'complete'){ 
        var selected_parent = jQuery.data( document.body, "selected_parent" );
        $('#menu').children('li:eq('+selected_parent+')').children('a').addClass('active');
    }
}
</script>

How to change active class while click to another link in bootstrap use jquery?

You are binding you click on the wrong element, you should bind it to the a.

You are prevent default event to occur on the li, but li have no default behavior, a does.

Try this:

$(document).ready(function () {
    $('.nav li a').click(function(e) {

        $('.nav li.active').removeClass('active');

        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();
    });
});

How to make li active after page loads

Try this, give your url name as the class name for all the li like below

<ul> 
<li class="dashboard"><a href="dashboard.php"><i class="ti-dashboard"></i>Dashboard</a></li>
  <li class="resume"><a href="resume.php"><i class="ti-wallet"></i>My Resume</a></li>
  <li class="employer-list"><a href="employer-list.php"><i class="ti-wallet"></i>Browse Jobs</a></li>
  <li class="assess"><a href="assess.php?q=1"><i class="ti-wallet"></i>Assessment</a></li>
  <li class="jobs"><a href="jobs.php"><i class="ti-hand-point-right"></i>Applied Jobs</a></li>
</ul>

Then change your jQuery as below, logic is that, from the url will get the class name you given for each li and assign active class accordingly.

 $(document).ready(function() {
  var relativePath = location.pathname.split("/");
  var activeMenu = relativePath[relativePath.length-1].replace(".php", "")[0];
    $('li.'+activeMenu).addClass("active");
});

How To Set/Keep 'active' class on link or li when redirect to another page?

When you load a new page all the code in current page is gone and all the scripts you have will run again on new page.

You need to compare the page's url to the links urls on page load.

Try the following:

$(function() {
  $('nav.side-navbar ul li a').each(function() {
    var isActive = this.pathname === location.pathname;
    $(this).parent().toggleClass('active', isActive);
  });
});