向元素添加类

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

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