How to add class when active menu - jquery

Question

I have jquery script that will add clas to a specfic li. The first 3 li it add class but if clicking on 4th to last li it does not apply. Please help me about this:

html:

<ul class="sidebar-menu" id = "navigation">
    <li><a href="www.site.com/dashboard">Dashboard</a></li> 
    <li><a href="wwww.site.com/mycoupon">My Coupons</a></li> 
    <li><a href="www.site.com/member">View Profile</a></li>
    <li><a href="www.site.com/update">Update Profile</a></li>
</ul>

Jquery:

$(document).ready(function() {
    var  current_page = document.URL;

    if (current_page.match(/dashboard/)){
        $("ul#navigation li:eq(0)").addClass('selected sel');
    }

    else if (current_page.match(/mycoupon/)){
        $("ul#navigation li:eq(1)").addClass('selected sel');
    } 

    else if (current_page.match(/member/)){
        $("ul#navigation li:eq(2)").addClass('selected sel');
    }

    else if (current_page.match(/update/)){
        $("ul#navigation li:eq(3)").addClass('selected sel');
    } 

    else { // don't mark any nav links as selected
        $("ul#navigation li").removeClass('selected sel');
    }
});

It is working for me.

James
– James

2016-08-12 07:12:09 +00:00
Commented Aug 12, 2016 at 7:12 — James
– James, Commented Aug 12, 2016 at 7:12
Oh in my side got stock to 3rd li only

coolshox
– coolshox

2016-08-12 07:14:16 +00:00
Commented Aug 12, 2016 at 7:14 — coolshox
– coolshox, Commented Aug 12, 2016 at 7:14

Anoop Joshi P · Accepted Answer · 2016-08-12 07:29:22Z

1

Instead of writing code for each menu, you can simply use like this,

$(document).ready(function() {
  var current_page = document.URL;
  $("#navigation li  a").filter(function() {
    return current_page.indexOf($(this).attr("href")) > -1
  }).closest("li").addClass("selected sel");
});

answered Aug 12, 2016 at 7:29

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

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

1 Comment

coolshox Over a year ago

Wooh You save my day Anoop Joshi Thanks A lot

Collectives™ on Stack Overflow

How to add class when active menu - jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related