CODEWITHSUNDEEP
javascriptjquery
laz
laz

Reputation: 291

Add active class for menu list based on url

I am trying to add active class based on url to show that which li is clicked.

pageUrl = location.pathname;
$('#sidebar-left nav li.active').removeClass("active");
if (pageUrl) {
  $('nav li:has(a[href="' + pageUrl + '"])').addClass("active");
}

this is what I have tried in init() method.
I am getting the pageUrl correctly.But am unable to add active class for clicked li.

html:

<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 can add active class using url only. Because each li has different pages so whenever I click the li, page will be refreshed.so I cant css/onclick/.click here.

Please give me some suggestion.

Upvotes: 0

Views: 4130

Answers (3)

Ibu
Ibu

Reputation: 43810

When you set an href url it automatically turns to full URL in JavaScript. So pathname in your code won't work. Instead lets use the filter() method from jquery.

$(function() {
    $('#sidebar-left nav li.active').removeClass("active");
    $('#sidebar-left nav li a').filter(function(){
        return this.href.indexOf(window.location.href) !== -1;
    }).parent().addClass("active");
});

Upvotes: 2

Cak Bud
Cak Bud

Reputation: 358

Iam using this script for adding class active to the a element when the url matched with current page url.

$(function(){
       pageUrl = location.pathname;
       $('nav ul li a').each(function () {
            link = $(this);
            if (link.attr("href") == pageUrl) {
                link.addClass("active");
            } 
       });
   });

The element structure look like below:

<nav>
    <ul>
        <li>
            <a href="/test/a/">Testing</a>
            <a href="/test/b/">Testing</a>
        </li>
    </ul>
</nav>

For your case, you could use this code:

$(function(){
       pageUrl = location.pathname;
       $('#sidebar-left ul li a').each(function () {
            link = $(this);
            if (link.attr("href") == pageUrl) {
                link.parent().addClass("active");
            } 
       });
   });

Upvotes: 1

Aswin Ramesh
Aswin Ramesh

Reputation: 1674

you missed the dot . in front of nav class

It should be like 

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

it should work if your location returns correctly, a minimal code you can find it here

NB: I have hardcoded the URL

$(document).ready(function() {
  pageUrl = '/employee/Home'
  $('#sidebar-left .nav li.active').removeClass("active");
  if (pageUrl) {
     $('.nav li:has(a[href="' + pageUrl + '"])').addClass("active");
  }
})
.active {
  color: red;
}
<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>

Upvotes: 1

Related Questions