更改活动按钮

时间:2016-03-08 06:08:20

标签: jquery css

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



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

});

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

<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;
&#13;
&#13;

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

4 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:0)

$('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()选择按钮,您将从

中删除该类

答案 2 :(得分:0)

也可以尝试

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

});   

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

答案 3 :(得分:0)

试用此代码

 $('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;
}