Question

我有2个按钮。我想更改仅活动按钮的背景颜色。我写了一个j查询，如下所示：

＆＃13;

$('button').click(function() {
    var value = $(this).attr('class');
    alert(value);
    if (value == "menu") {
        $(this).removeClass("current");
        $(this).addClass("current");
    }

});

＆＃13;

.current {
    background - color: blue;
    color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="menu" type="button" class="btn buttn">All</button>
<button class="menu" type="button" class="btn buttn">Tag1</button>

＆＃13;

当我点击按钮时，css属性不适用。谁能告诉我我做错了什么？

Answer 1

css中的错误：

应该是：background-color: blue;而不是background - color: blue;。从background - color

中删除空格

在JQuery代码之前包含JQuery plugins。

<强> Fiddle

如果你只希望颜色只用于活动类更改JQuery，如下所示：

而不是$(this).removeClass("current");使用$('.menu').removeClass("current");删除类。

$('button').click(function() {
    var value = $(this).attr('class');
    alert(value);
    if (value == "menu") {
        $('.menu').removeClass("current");
        $(this).addClass("current");
    }

});

<强> Updated Fiddle

Answer 2

$('button').click(function() {
  var value = $(this).attr('class');
  alert(value);
  if (value == "menu") {
    $(this).siblings().removeClass("current");
    $(this).addClass("current");
  }

});

.current {
  background-color: blue;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="menu" type="button" class="btn buttn">All</button>
<button class="menu" type="button" class="btn buttn">Tag1</button>

如果只有两个按钮，您可以尝试使用.siblings()选择按钮，您将从

中删除该类

Answer 3

也可以尝试

$('button').on('click', function() {
   var value = $(this).attr('class');
   alert(value);
   if (value == "menu") {
    $(this).siblings().removeClass("current");
    $(this).addClass("current");
   }

});

并将css背景颜色更改为背景颜色

Answer 4

试用此代码

 $('button').click(function() {       
        if ($(this).attr('class').toLowerCase()== "menu") {
  $('.menu').removeClass("current");   
            $(this).addClass("current");
        }
    });

CSS Class

.current {
  background-color: blue; // also change here
  color: white;
}

更改活动按钮

4 个答案: