twitter-bootstrap 如何确保按下的按钮保持“按下”状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25280746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make sure pressed button remain "pressed down"
提问by Franva
I am using BootStrap Group Button class and found that in my own code, if a button is pressed down, the button will pop up back in a few seconds....
我正在使用 BootStrap Group Button 类，发现在我自己的代码中，如果按下一个按钮，该按钮将在几秒钟内弹回......
How can I make sure it remain pressed-down status?
我怎样才能确保它保持按下状态？
<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>
Thank you.
谢谢你。
Update
更新
I added the active css and I found that when I clicked the button the whole page gets refreshed so that's why the button loses active css class. How to disable the submit action on these 3 button only? Coz I do have a button which is also in this form and it needs to trigger a submit action.
我添加了活动 css，我发现当我单击按钮时，整个页面都会刷新，这就是按钮丢失活动 css 类的原因。如何仅禁用这 3 个按钮上的提交操作？因为我确实有一个按钮，它也是这种形式，它需要触发提交操作。
$('.btn-stage').click(function () {
$(this).toggleClass("active"); //addCss("active");
})
Update 3
更新 3
Also, in this button group, only one button can be selected, if other button is selected, then the rest of buttons should bounce back.
另外，在该按钮组中，只能选择一个按钮，如果选择了其他按钮，则其余按钮应弹回。
Thank you.
谢谢你。
采纳答案by Scott L
Adding an active class to the button should keep it's 'pressed in' style.
向按钮添加一个活动类应该保持它的“按下”样式。
$('.btn').click(function(e) {
e.preventDefault();
$(this).addClass('active');
})
Hope that helps.
希望有帮助。
回答by 4dgaurav
js
js
$('.Button').click(function() {
$(this).toggleClass("active");
});
css
css
.Button:active, .active {
background-color:red;
color: white;
}
html
html
<button class='Button'>Button</button>
js
js
$('.Button').click(function(e) {
$('.Button').not(this).removeClass('active');
$(this).toggleClass('active');
e.preventDefault();
});
html
html
<button class='Button'>Button</button>
<button class='Button'>Button</button>
<button class='Button'>Button</button>
css
css
.Button:active, .active {
background-color:red;
color: white;
}
回答by Youness
add a class to define them lets say "nosubmit" like this :
添加一个类来定义它们让我们像这样说“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>
then do this :
然后这样做：
$('.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;
});
回答by Still Newbie
Where did you put the buttons? Is it in form? I have no problem add/changing button's class into active if the buttons are not within the form tag. you can use:
你把按钮放在哪里？是形式吗？如果按钮不在表单标签内，我可以将按钮的类添加/更改为活动状态。您可以使用：
$(document).ready(function(){
$('.btn-stage').click(function () {
$('.btn-stage.active').removeClass("active");
$(this).addClass("active");
})
});
but if it is in the form tag, you need to add type='button' to your button elements. so it looks like this
但是如果它在表单标签中，你需要在你的按钮元素中添加 type='button' 。所以它看起来像这样
<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>
And the javascript above is still working. When you had a button within a form and you don't specify the type of its button, it will automatically set as type='submit'
上面的javascript仍然有效。当表单中有一个按钮并且没有指定其按钮的类型时，它会自动设置为 type='submit'
