Изменить цвет фона активной кнопки

Question

У меня есть 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>

Когда я нажав на кнопку свойства CSS не претендует. Может ли кто-нибудь сказать мне, где я делаю неправильно?

Answer 1

ошибки в CSS:

Оно должно как: background-color: blue; вместо background - color: blue;. Удалить место от background - color

И укажите JQuery plugins перед кодом JQuery.

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 класс

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