Question

这就是我要找的：

How to keep button active after press with jQuery

我想要四个按钮，只有一个按钮处于活动状态。

例如，如果按下按钮1，则其他按钮不会显示为活动状态，反之亦然。

Answer 1

如果您正在寻找纯JavaScript解决方案（即。没有与jQuery，Bootstrap等有额外的依赖关系），您可以这样做。

首先，将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);
        }
    }
}

然后你需要在click事件的处理程序中编写你想要的行为，在这个例子中，我只是更改类以获得哪一个是活动的视觉反馈：

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

Answer 2

假设您的链接中包含以下代码：

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

这就像写作一样简单：

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

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

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();
    });
});

用于更改按钮状态的javascript

4 个答案: