引導程序：復位按鈕鏈接活動狀態恢復正常

Question

這裏是fiddle。

我有行爲幾乎做它需要做的事情。

懸停效果很好，單擊時按鈕保持活動狀態，當我點擊另一個按鈕時，上一個按鈕變爲非活動狀態。

我的問題是當我再次單擊活動按鈕時，它不會重置爲非活動狀態（即回到正常狀態）。我嘗試了很多方法來獲得我需要的行爲，但我無法讓它正常工作。

我試過$().button(),.toggle()，翻過documentation，還有其他一些我不記得了。

HTML

<a class="btn btn-success btn-md">Link One</a> 
<a class="btn btn-success btn-md">Link Two</a> 
<a class="btn btn-success btn-md">Link Three</a> 
<a class="btn btn-success btn-md">Link Four</a> 

CSS

.btn-active, 
.btn-success:hover { 
    background-color: #003c1e; 
    color: #fff !important; 
    /* Gradient */ 
    background: #00356B; /* Old browsers */ 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#006b34), to(#003c1e)) !important; 
    background: -webkit-linear-gradient(#006b34 0%, #003c1e 100%) !important; 
    background: -moz-linear-gradient(#006b34 0%, #003c1e 100%) !important; 
    background: -o-linear-gradient(#006b34 0%, #003c1e 100%) !important; 
    background: linear-gradient(#006b34 0%, #003c1e 100%) !important; /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006b34', endColorstr='#003c1e',GradientType=0) !important; /* IE6-9 */ 

} 

JS

$(".btn-success").click(function(){ 
    $(this).addClass("btn-active").siblings().removeClass("btn-active"); 
}); 

FFF

Answer 1

你幾乎沒有，請嘗試使用toggleClass（）而不是切換（）。

Toggle用於控制元素的可見性，而toggleClass將爲您打開和關閉CSS類名稱。

$(".btn-success").click(function(){ 
    $(this).toggleClass("btn-active").siblings().removeClass("btn-active"); 
});