根据子元素href属性将活动类设置为元素

Question

I have written code for navigation. I want to check which class is active, according to that it should set color blue for that respective tab

My Code

 $(function() { var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); $("#tslcNav ul li a").each(function() { if ($(this).attr("href") == pgurl || $(this).attr("href") == '') $(this).addClass("active"); }) }); 

 .tslcNav li:hover, .tslcNav li.active, .tslcNav li.active { background: none; border-color: #009FD6; color: #009FD6; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="tslcNav" role="navigation"> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="index.html">Home</a></li> <li><a href="manage.html">Manage </a></li> <li><a href="welcome.html">welcome/a></li> <li><a href="security.html">Security </a></li> </ul> </div> <!--/.nav-collapse --> </div> 

Answer 1

You are placing the active on the a element, not the list Change your javascript code to this:

$(function() {
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
    $(".tslcNav ul li a").each(function(){
         if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
         $(this).parent().addClass("active");
    })
});   

Answer 2

Well that is because you are adding class active to anchor element. And your selector targets li elements with class active. Hence you need to add class active to parent li, instead of adding it to anchor element. you can use .closest() or .parent() here:

 $(this).closest('li').addClass("active");