css - 如何确保按下的按钮保持 "pressed down"

Question

我正在使用 BootStrap Group Button 类，发现在我自己的代码中，如果按下一个按钮，该按钮将在几秒钟后弹出....

如何确保它保持按下状态？

<div class="row">
<div class="col-md-12">
    <div class="form-group">
        <label>Stage of business:</label>
        <br />
        <div class="btn-group">
            <button class="btn btn-default"><span class="glyphicon">Start-up</span>
            </button>
            <button class="btn btn-default"><span class="glyphicon">Growth Company</span>
            </button>
            <button class="btn btn-default"><span class="glyphicon">Mature Company</span>
            </button>
        </div>
    </div>
</div>

谢谢。

---

更新

我添加了 active css 和我发现当我单击按钮时，整个页面都会刷新，这就是按钮失去事件 css 类的原因。如何仅禁用这 3 个按钮的提交操作？因为我确实有一个按钮也是这种形式，它需要触发提交操作。

$('.btn-stage').click(function () {
            $(this).toggleClass("active"); //addCss("active");
        })

---

更新 3

另外，在这个按钮组中，只能选择一个按钮，如果选择了其他按钮，则其余按钮应该弹回。

谢谢。

Answer 1

向按钮添加一个事件类应该保持它的“按下”风格。

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

希望对您有所帮助。