Unable to add active class to a menu list

Question

I have side menubar in my page.when menu list is clicked,page will be redirected depends on the href .

After redirecting the page I need to add active class to the clicked li using url to keep the menu list opened. I have written the following code to achieve this.

$(document).ready(function() {
  pageUrl = '/employee/Home'
  $('#sidebar-left .nav li.active').removeClass("active");
  if (pageUrl) {
     $('.nav li:has(a[href="' + pageUrl + '"])').addClass("active");
  }
})

Here I have hardcoded the url for sample.
Now my problem is whenever I click the list , active class is added to the content of the href page.
ie. this url href="/documents/doc_details" page has nav list and each li has forms so active class is added to the full content of href="/documents/doc_details" .
I dont understand why am unable to add active class to only the clicked li?

Just a sample: https://jsfiddle.net/tphdp1fa/ (no inner pages)

Can anyone help me?Thanks !!.

Answer 1

Use click event for the a tag as below code snippets for enabling and disabling the active class.

Fiddle Demo

Example:

 $(document).ready(function() { pageUrl = '/employee/Home' $('#sidebar-left .nav li.active').removeClass("active"); if (pageUrl) { $('.nav li:has(a[href="' + pageUrl + '"])').addClass("active"); } }); $("body").on("click", "a", function(e) { e.preventDefault(); //Prevented the default action of "a" tag for demo pageUrl = $(this).attr("href");//Give your own link here $('#sidebar-left .nav li.active').removeClass("active"); if (pageUrl) { $('.nav li:has(a[href="' + pageUrl + '"])').addClass("active"); } }); 

 .active { color: red; } a { text-decoration: none; color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sidebar-left" class="col-xs-2 col-sm-2"> <ul class="nav main-menu"> <li class="dropdown ng-scope" ng-repeat="parent in menu"> <a href="/employee/Home" class="dropdown-toggle" ng-click="tabName(parent.name)"> <i class="fa fa-home"></i> <span class="hidden-xs ng-binding">Home</span> </a> </li> <li class="dropdown ng-scope" ng-repeat="parent in menu"> <a href="/documents/doc_details" class="dropdown-toggle" ng-click="tabName(parent.name)"> <i class="fa fa-file-text"></i> <span class="hidden-xs ng-binding">Documents</span> </a> </li> <li class="dropdown ng-scope" ng-repeat="parent in menu"> <a href="#" class="dropdown-toggle" ng-click="tabName(parent.name)"> <i class="fa fa-money"></i> <span class="hidden-xs ng-binding">Pay &amp; Benifits</span> </a> <ul class="dropdown-menu"> <li ng-repeat="child in parent.children" class="ng-scope"> <a href="/pay/paymanagement" ng-click="tabName(child.name)" class="ng-binding">slips</a> </li> </ul> </li> </ul> </div> 

Note: I have prevented the default action of "a" tag using e.preventDefault();