JavaScript的改變按鈕狀態

Question

這就是我要找：

How to keep button active after press with jQuery

我想四個按鈕和只有一次一個按鈕激活。

例如，如果按下按鈕1，其他按鈕不會顯示爲活動，反之亦然。

Answer 1

假設你已經在你的鏈接代碼：

$('.uiButton').click(function() { 
    $(this).toggleClass("active"); 
}); 

這將是一樣容易寫：

$('.uiButton').click(function() { 
    $('.uiButton').removeClass("active"); 
    $(this).addClass("active"); 
}); 

Answer 2

http://jsfiddle.net/kdghcec9/

HTML：

<button class="btn">One</button> 
<button class="btn">Two</button> 
<button class="btn">Three</button> 

CSS：

.btn { 
    border: 0; 
    outline: 0; 
    display: inline-block; 
    background-color: #ddd; 
    border-radius: 3px; 
    padding: 10px 12px; 
} 

.btn.active { 
    background-color: #000; 
    color: #fff; 
} 

JS（jQuery的）：

$(function() { 
    $('.btn').on('click', function(e) { 
     $('.btn.active').removeClass('active'); 
     $(this).addClass('active'); 
     e.preventDefault(); 
    }); 
}); 

Answer 3

希望這有助於你：

HTML

<button id='1' class="btn">1</button> 
<button id='2' class="btn">2</button> 
<button id='3' class="btn">3</button> 
<button id='4' class="btn">4</button> 

CSS

.actv { 
    background: red; 
} 

JS

$(".btn").click(function() { 
    $(document).find(".btn").removeClass("actv"); 
    $(this).addClass("actv"); 
}); 

JSFiddle

Answer 4

如果你正在尋找一個純JavaScript解決方案（即沒有額外的依賴與jQuery，引導，等等），你可以不喜歡它這個。

首先，集團在共同的母公司您的HTML按鈕，這樣你就可以在它們之間迭代，例如：

<div id="buttonGroup"> 
    <button>1</button> 
    <button>2</button> 
    <button>3</button> 
    <button>4</button> 
</div> 

然後，在JavaScript中，您可以通過點擊事件設定處理「初始化」的div按鈕：

function initButtonGroup(parentId) { 
    var buttonGroup = document.getElementById(parentId), 
     i = 0, 
     len = buttonGroup.childNodes.length, 
     button; 
     handleButtonGroupClick = initClickHandler(parentId); 

    for (; i < len; i += 1) { 
     button = buttonGroup.childNodes[i]; 
     if (button.nodeName === 'BUTTON') { 
      button.addEventListener('click', handleButtonGroupClick); 
     } 
    } 
} 

然後，你需要寫你在點擊事件的處理程序想要的行爲，在這個例子中，我只是改變了類獲得視覺反饋，其中一個是活動：

function initClickHandler(parentId) { 
    return function(e) { 
     var buttonGroup = document.getElementById(parentId), 
      i = 0, 
      len = buttonGroup.childNodes.length, 
      button; 

     e.preventDefault(); 

     for (; i < len; i += 1) { 
      button = buttonGroup.childNodes[i]; 
      if (button.nodeName === 'BUTTON') { 
       button.className = ''; 
      } 
     } 

     e.target.className = 'active'; 
    }; 
} 

然後，你可以打電話給你的初始化函數初始化你的「分量」：

initButtonGroup('buttonGroup'); 

我設置一個的jsfiddle在這個例子中，我們來看一看：如果性能是http://jsfiddle.net/et75ftca/

對您而言非常重要，可以通過在整個div元素中使用單擊事件處理程序並過濾未在button處定位的事件來優化此代碼。