Question

我的Html

<div onclick="change()" class="button">ELEMENT 1</div>
<div onclick="change()" class="button">ELEMENT 2</div>
<div onclick="change()" class="button">ELEMENT 3</div>

我的Css

.button {
background-color: #fff;
color:#000;
}

.buttonactive {
background-color: #000;
color:#fff;
}

我的jQuery

function change() {
      $(this).addClass("buttonactive");
}

我想将当前按钮更改为类buttonactive ...

Answer 1

将按钮更改为（删除内联事件处理程序）：

<div class="button">ELEMENT 2</div>

jQuery：

$('div.button').click(function(){
    $(this).addClass("buttonactive");
})

<强> jsFiddle example

Answer 2

您也可以使用jQuery，将click事件绑定到按钮，并将buttonactive类添加到单击的按钮。从所有div中删除onchange来电。

$(function(){
  $('.button').click(function(){
    //remove class from previously active button
    $('.buttonactive').removeClass('buttonactive');
    $(this).addClass('buttonactive');
  });
});

DEMO

Answer 3

尝试将this作为参数传递给内联犯罪者，

HTML

<div onclick="change(this)" class="button">ELEMENT 1</div>
<div onclick="change(this)" class="button">ELEMENT 2</div>
<div onclick="change(this)" class="button">ELEMENT 3</div>

JS

function change(_this) {
   $(_this).addClass("buttonactive");
}

DEMO

Answer 4

您的CSS错误。 CSS正在层叠！你的结构不稳定。使用这个css：

.button {
  background-color: #fff;
  color:#000;
}

.button.buttonactive {
  background-color: #000;
  color:#fff;
}

另外：考虑将课程buttonactive仅重命名为active

更改当前按钮元素的类

4 个答案:

DEMO