更改当前按钮元素的类

change class of current button element

本文关键字：元素 按钮      更新时间：2023-09-26

我的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");
}

我想将当前按钮更改为类按钮活动。。。

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

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

和jQuery到：

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

jsFiddle示例

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

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

DEMO

尝试将this作为参数传递给内联hander

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

演示

您的CSS是错误的CSS正在级联！你的建筑不稳定。使用此css：

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

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

相关文章：