jquery - 在 li 和单击时添加类

Question

我在 li 和标签上添加了一个类。但是当我在“a”标签上添加类时，我添加的类不起作用。但是我在 li 标签上添加的类确实有效。

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

});
});

.active 类正在工作，但 .current 类没有。

Answer 1

它在这个例子中有效。（我不得不从链接中删除href，这样我才能看到css的变化）

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/

更新

您不必在两个单独的点击事件中添加类。在同一个点击事件中可能会更好。

$(function() {

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

});