CODEWITHSUNDEEP
javascriptjquery
Yadav Sanjay
Yadav Sanjay

Reputation: 81

Add active class after page loading

I am trying to add an active class after page load. Here is my script. This script is working when I click. But when the page is loaded, the active class disappear.

<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>
          </li>
    </ul>


       $(document).ready(function(){
           $(".nav-item a").on("click", function(){  $(".nav-item").find(".active").removeClass("active");  $(this).parent().addClass("active");});
        });

I am trying to work with localStorage function not succeed .please suggest me what I have to do.

Upvotes: 0

Views: 3664

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 0

Mike
Mike

Reputation: 1337

You can clean up your code in many ways:

  • use toggleClass instead of add/remove class
  • use .nav-link rather than .nav-item a for one, a will be any anchor element, not just the first child (you'd do better to do .nav-item > a), but that has a distinctive class (.nav-link) so use that
  • to assign a class on load, just do it and don't put it in the click event

$(document).ready(function() {
  $('.nav-item').addClass('active'); // <-- how to add the class on page load
  $(".nav-link").on("click", function() {
    $(this).parent().toggleClass('active');
  });
});
.active .nav-link::after {
  content: " <==";
  color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<div class="container">
  <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>
</div>

Upvotes: 1

Related Questions