Javascript 使用jquery更改html类

我有许多元素具有相同的类名，例如：

<li class="contact" id="content">
 // some content here....
</li>
 .
 .
<li class="contact active" id="content">
 // some content here....
</li>
 .
 .
<li class="contact" id="content">
 // some content here....
</li>
 .
 .
<li class="contact" id="content">
 // some content here....
</li>
 .
 .

---

但问题是，它只搜索一个匹配的id，然后停止。因此，除了第一个元素外，所有其他元素都没有效果。另外，当我单击其他元素时，我想将已经活动的类（“contact active”）的名称改回“contact”。

您遇到的主要问题是

id

属性需要在DOM中始终是唯一的。如果要使用公共标识符对元素进行分组，请使用

类

然后可以按该类选择元素，并对其调用

toggleClass（）

。请注意，您也不需要删除/添加

联系人

类

最后一个问题是一次只能有一个活动类，因此应该取消选择另一个活动类

在这种情况下，您只需对所有

.content

元素调用

removeClass（）

，但单击的元素除外。试试这个：

$（'.content'）。单击（函数（）{
$（'.content'）.not（this.removeClass（'active'）；
$（this.toggleClass（'active'）；
});
.active{
颜色：#C00；
}



所容纳之物


所容纳之物


所容纳之物


所容纳之物

ID必须是唯一的。id选择器正在将单击事件仅分配给匹配集中的第一个元素

您需要修改click事件，使其具有类选择器而不是ID选择器：

 var $contactDiv = $('.contact');
 $contactDiv.click(function() {
  $contactDiv.removeClass('active'); // remove all active
  $(this).addClass('active'); // add it back on this object
 });


$（'.contact'）。单击（函数（）{
$（'.contact'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
.active{
颜色：#000；
字体大小：20px；
字号：700；
}



内容1。。。


内容2。。。


内容3。。。


内容4。。。

id不应重复。你应该改用class。我还建议使用toggleClass jQuery函数
id
应该是唯一的，您不能有超过1个元素具有相同的
id
是的，但是这些类正在使用php打印在循环上。您可以使用class.contact'我建议更改php循环，使id唯一，然后通过类附加事件，例如“contact”.我的坏，太好了，这很有效！但最后一个问题是，一次只能有一个活动类，因此应该取消选择另一个活动类。
 var $contactDiv = $('.contact');
 $contactDiv.click(function() {
  $contactDiv.removeClass('active'); // remove all active
  $(this).addClass('active'); // add it back on this object
 });