CODEWITHSUNDEEP
jqueryhtmlcss
Defyleiti
Defyleiti

Reputation: 555

Adding class on li and a on click

I'm adding a class on li and a tags. But when I add class on "a" tag the class I add does not work. But the class I add on the li tag does work.

HTML

<ul id="navigation">
<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</ul>

CSS

.active{
background: red; //This will be an image file. for simplicity I just use color
}

.current{
color:blue;
}

Jquery

$(function() {

$("#navigation li").click(function() {

$("#navigation .active").removeClass("active");
$(this).addClass("active");

});

$("#navigation a").click(function() {

$("#navigation .current").removeClass("current");
$(this).addClass("current");

});
});

The class .active is working but the class .current does not.

Upvotes: 1

Views: 4188

Answers (1)

Trevor
Trevor

Reputation: 16116

It works in this example. ( I had to take away the href out of the links so that I could see the css change)

Html

<ul id="navigation">
  <li><a>Home</a></li>
  <li><a>About</a></li>
  <li><a>Contact</a></li>
</ul>

CSS

.active{
 background: red; //This will be an image file. for simplicity I just use color
}

.current{
  color:orange;
}

li {
  cursor:pointer;
}

jQuery

No change.

http://jsfiddle.net/cTETF/

Update

You don't have to add the classes in two separate click events.. It would probably be better to do it in the same click event.

$(function() {

$("#navigation li").click(function(event) {
   event.preventDefault();
   $("#navigation .active").removeClass("active");
   $("#navigation .current").removeClass("current");
   $(this).addClass("active");
   $(this).find("a").addClass("current");
});

});

Upvotes: 1

Related Questions