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必须是唯一的，并尝试这样做：

<强> 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

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

然而，问题的原因是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 Specificity

将类添加到元素

4 个答案: