リリーストグル効果別のリンクをクリックしたときに

Question

私は現在、クリックしたときに背景色を変更するためのリンクを原因とJavaScriptを持っている：

$(".button").click(function(){ 
    $(this).css('background-color', '#555'); 
}); 

をそして、それは動作しますが、私は私がクリックしたときにオフに切り替えるには、その色をしたいと思います別のリンク。

Answer 1

あなたはクラスのオン/オフを切り替えることができ、この

$(function() { 
    $(".button").click(function() { 
    $(this).css('background-color', '#555'); 
    $(".button").not($(this)).css('background-color', ''); 

    }); 
}); 

JSFIDDLE

Answer 2

のように行うことができます。

.toggled { 
    background-color: #555; 
} 

//In JavaScript 
$(function() { 
    var allButtons = $(".button"); 
    allButtons.click(function() { 
     allButtons.removeClass("toggled"); 
     $(this).addClass("toggled"); 
    }); 
}); 

Answer 3

クリックして背景を設定し、別の要素の背景を削除する必要があります。クリックした.buttonの兄弟要素を選択するには.siblings()を使用できます。

$(".button").click(function() { 
 
    $(this).css("background-color", "#555").siblings().css("background-color", ""); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="button">Button1</a> 
 
<a href="#" class="button">Button2</a> 
 
<a href="#" class="button">Button3</a>