添加类元素(Add class to element)

这样，我有两个标签，所以当我在一个点击它的活跃，逻辑。 现在我正在努力使活动和非活动标签之间的差异，但不与的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:

首先，不要使用相同的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;
}

Answer 2:

你不能有相同的id在HTML两个div。 试着改变你的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 3:

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

因此，要么，移动代码

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

下面的div的你想改变，或在文档准备功能包裹。

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

这将等到DOM已运行您的代码之前被创建。

Answer 4:

首先， id S的关系始终是唯一的。

然而，您的问题的原因是CSS特异性。 一个id规则是不是一个一类更具体。 试试这个。

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

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

但请记住，这将有效地克服特殊性问题。 它并没有解决，你需要摆脱你重复的事实id秒。

CSS特异性

文章来源: Add class to element