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>

谢谢。

更新

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

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

更新3

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

谢谢。

Answer 1

向按钮添加活动类应该保持“按下”样式。

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

希望有所帮助。

Answer 2

<强> Demo

JS

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

CSS

.Button:active, .active {
    background-color:red;
    color: white;
}

HTML

<button class='Button'>Button</button>

<强> Final Demo

JS

$('.Button').click(function(e) {
    $('.Button').not(this).removeClass('active');    
    $(this).toggleClass('active');
    e.preventDefault();
});

HTML

<button class='Button'>Button</button>
<button class='Button'>Button</button>
<button class='Button'>Button</button>

CSS

.Button:active, .active {
    background-color:red;
    color: white;
}

Answer 3

添加一个类来定义它们，让我们像这样说“nosubmit”：

    <button class="btn btn-default nosubmit"><span class="glyphicon">Start-up</span>
    </button>
    <button class="btn btn-default nosubmit"><span class="glyphicon">Growth Company</span>
    </button>
    <button class="btn btn-default nosubmit"><span class="glyphicon">Mature Company</span>
    </button>

然后这样做：

    $('.nosubmit').click(function() {
        $(this).addClass("active");
        $('.nosubmit').unbind( "click" );// this will take off the click handler from all the nosubmit buttons
// if you want it to be to changed back whene you click again use toggleClass instead
         return false;
    });

Answer 4

你把按钮放在哪里了？是形式吗？如果按钮不在表单标签内，我可以将按钮的类添加/更改为活动状态。你可以使用：

$(document).ready(function(){
        $('.btn-stage').click(function () {
            $('.btn-stage.active').removeClass("active");
            $(this).addClass("active");
        })
    });

但如果它在表单标记中，则需要添加type =＆＃39; button＆＃39;你的按钮元素。所以它看起来像这样

<form>
    <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 btn-stage" type='button'><span class="glyphicon">Start-up</span>
                        </button>
                        <button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Growth Company</span>
                        </button>
                        <button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Mature Company</span>
                        </button>
                    </div>
                </div>
        </div>
    </div>
</form>

上面的javascript仍在运行。当您在表单中有一个按钮但未指定其按钮的类型时，它将自动设置为类型=＆＃39;提交＆＃39;

如何确保按下的按钮保持＆＃34;按下＆＃34;

4 个答案: