Add active class for menu list based on url

Question

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.

give this console.log($('nav li:has(a[href="' + pageUrl + '"])')) inside if condition and check whether you are getting the DOM there — Aswin Ramesh
– Aswin Ramesh, Commented Jan 22, 2018 at 6:33
I thought there may be some other way in angularjs to achieve this. — laz
– laz, Commented Jan 22, 2018 at 6:33
@AswinRamesh this is what I got.. r.fn.init(0) length : 0 prevObject : r.fn.init [document] __proto__ : Object(0) — laz
– laz, Commented Jan 22, 2018 at 6:35
@laz this means the element you are searching for doesn't exist in the page, it might be because the pageUrl may have the full URL, whereas you a tag will only have the relative path — Aswin Ramesh
– Aswin Ramesh, Commented Jan 22, 2018 at 6:37

Ibu · Accepted Answer · 2018-01-22 23:25:40Z

2

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");
});

edited Jan 22, 2018 at 23:25

answered Jan 22, 2018 at 6:51

Ibu

44k14 gold badges82 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

laz Over a year ago

let me try:-):-)

Hanif Over a year ago

It should work. I checked lbu code it is working for me.

laz Over a year ago

I think am adding my code in wrong place.page is getting refreshed after clicking the menu.so added active class may be hide right?

Aswin Ramesh · Accepted Answer · 2018-01-22 07:24:13Z

1

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>

edited Jan 22, 2018 at 7:24

answered Jan 22, 2018 at 6:53

Aswin Ramesh

1,6741 gold badge13 silver badges13 bronze badges

15 Comments

laz Over a year ago

still am facing the same probem :-(

Aswin Ramesh Over a year ago

@laz can you tell what it gives you now console.log($('.nav li:has(a[href="' + pageUrl + '"])')) inside the if

laz Over a year ago

it gives the same thing..which I posted initially :-(

laz Over a year ago

I think am adding my code in wrong place.page is getting refreshed after clicking the menu.so added active class may be hide right?

Aswin Ramesh Over a year ago

so if in that case, can you add it in document ready, like in my snippet

|

Cak Bud · Accepted Answer · 2018-01-22 07:29:19Z

1

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");
            } 
       });
   });

edited Jan 22, 2018 at 7:29

answered Jan 22, 2018 at 7:23

Cak Bud

3784 silver badges10 bronze badges

3 Comments

laz Over a year ago

I think am adding my code in wrong place.page is getting refreshed after clicking the menu.so added active class may be hide right?

Cak Bud Over a year ago

If your code inside $(function(){//yourcode}) or $(document).ready(function(){//your code});is not problem with refreshed page. Because the code execute after page has loaded or on document ready.

Cak Bud Over a year ago

do not add the code inside onClick event. but put it on somewhere else.

Collectives™ on Stack Overflow

Add active class for menu list based on url

3 Answers 3

3 Comments

15 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

15 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related