jquery - 将类添加到元素

Question

像这样，我有两个选项卡，所以当我单击一个选项卡时，它是活动的，逻辑。现在我试图区分活动和非活动选项卡，但不是使用 .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;
}

Answer 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;
}

Answer 2

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

所以要么，移动代码

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

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

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

在运行您的代码之前，它将等到创建了 dom。

Answer 3

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

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

Answer 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;
}

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

CSS 特异性