将类添加到元素

Posted 2023-03-05

【中文标题】将类添加到元素

【英文标题】：Add class to element

【发布时间】：2013-01-23 14:25:59

【问题描述】：

像这样，我有两个选项卡，所以当我单击一个选项卡时，它是活动的，逻辑。现在我试图区分活动和非活动选项卡，但不是使用 .css 属性，但我想将特定类添加到单击的选项卡，如下所示：

$(".tab1").addClass('active');

但是，不好。还请记住，我正在使用外部 css 文件。

<div id="menuitem" class="tab1"></div>
<div id="menuitem" class="tab2"></div>

.active 
    width: 170px;
    height: 70px;
    float: right;
    background-color: red;


#menuitem 
    width: 170px;
    height: 70px;
    float: right;
    background-color: white;

【问题讨论】：

你应该让你的 ID 独一无二，而不是你的班级

【参考方案1】：

html 中的两个 div 不能有相同的 id。尝试像这样更改您的 HTML。

<div id="menuitem1" class="menuitem tab1"></div>
<div id="menuitem2" class="menuitem tab2"></div>

.active 
background-color: red;


.menuitem 
width: 170px;
height: 70px;
float: right;
background-color: white;

【讨论】：

另外请注意，您不需要在 .active 类中重复相同的属性。由于唯一的区别是背景颜色，因此您可以排除宽度、高度和浮动。

【参考方案2】：

另一个问题可能是您在 div 元素存在之前运行 jQuery 函数。

所以，要么，移动代码

$(".tab1").addClass('active');

在您要更改的 div 下方，或将其包装在文档就绪函数中。

$(document).ready(function()
    $(".tab1").addClass('active');
);

它会等到 dom 被创建后再运行你的代码。

【参考方案3】：

首先不要在不同的元素上使用相同的id，id 必须是唯一的，试试这个：

jQuery：

$('.menuitem').click(function() 
    $('.menuitem').removeClass('active');
    //removes active class from all menu items

    $(this).addClass('active');
    //adds active class to clicked one
);

html：

<div id="tab1" class="menuitem"></div>
<div id="tab2" class="menuitem"></div>

css：你不需要为活动类定义相同的属性，只需定义区别：

.active  background-color: red; 

.menuitem 
  width: 170px;
  height: 70px;
  float: right;
  background-color: white;

【参考方案4】：

首先，ids 应该始终是唯一的。

但是，您的问题的原因是 css 特异性。 id 规则比一类规则更具体。试试这个吧。

#menuitem.active 
width: 170px;
height: 70px;
float: right;
background-color: red;


#menuitem 
width: 170px;
height: 70px;
float: right;
background-color: white;

请记住，这将有助于克服特异性问题。它没有解决您需要摆脱重复的ids 的事实。

CSS Specificity