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

});

在li和a点击上添加类

1 个答案: