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处定位的事件来优化此代码。