JQuery not working to add css class

Question

I need to change the background for the menu item of the active page. I trying to achieve this with JQuery and CSS.

My code is: HTML

<ul class="nav">
   <li id="header"><a href="Default.aspx">Home</a> </li>
   <li>|</li>
   <li><a href="About.aspx">About</a> </li>
</ul>

CSS

.nav li.active {
  background-color:green;
}
.nav li.active a {
  color:#fff;
  font-weight:bold;
  background-color:green;
 }

And finally the JQuery I am using for this is as below.

$(function () {
  setNavigation();
  /* below statement is just to verify if jquery working at all*/
  $('#header').css("background-color", "green"); 
});

function setNavigation() {
  var path = window.location.pathname;
  path = path.replace(/\/$/, "");
  path = decodeURIComponent(path);            
  $(".nav a").each(function () {               
    var href = $(this).attr('href');
    if (path.substring(0, href.length) == href) {
      $("a").closest('li').addClass('active');
      /* below statement is just to verify if jquery working*/
      $('#header').css("background-color", "green");                 
    }
  });
}

I tried to debug this is using firebug still couldn't find the mistake. I'm a newbie to JQuery and This is not working (might be a silly mistake) :( Can anyone please help me with this?

Any errors in your console? Throw a console statement before your if statement to verify that the condition is being met. — tymeJV
– tymeJV, Commented Oct 20, 2014 at 20:19
If your header never comes green, it's because your condition is not good. Try to modify it by checking if the href is include in the path like this : if (path.indexOf(href) >= 0) — Mathieu Labrie Parent
– Mathieu Labrie Parent, Commented Oct 20, 2014 at 20:22
It worked.. :D Thanks a ton Mathieu. and also changed "a" to this. Working and looking gr8. :D — Amruta Chitale
– Amruta Chitale, Commented Oct 21, 2014 at 6:37

Christian · Accepted Answer · 2014-10-20 20:20:23Z

2

$("a").closest('li').addClass('active'); will always do the same thing regardless of what page you're on. It will add the active class to every li which has an anchor as a child, because you're selecting every anchor on the page with $("a").

Perhaps you wanted something like this:

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

answered Oct 20, 2014 at 20:20

Christian

19.8k3 gold badges57 silver badges70 bronze badges

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

Comments

What have you tried · Accepted Answer · 2014-10-20 20:25:25Z

2

When you're in an .each loop, $(this) refers to the object currently being iterated on. You want to add the class to the current anchor, not all anchors. So, you're going to want to change the following line:

Change $("a").closest('li').addClass('active');

To this line:

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

edited Oct 20, 2014 at 20:25

answered Oct 20, 2014 at 20:20

What have you tried

11.2k4 gold badges35 silver badges45 bronze badges

2 Comments

Amruta Chitale Over a year ago

I have tried that too. Its still not working. I added "a" purposely to see if the class is added at all.

What have you tried Over a year ago

@AmrutaChitale Are you sure it's even making it that far in the code? Put an alert box where it says $('a').closest('li').... Because I think it's not making it past your check on the href line

Collectives™ on Stack Overflow

JQuery not working to add css class

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related