Html 使用单选按钮使用引导程序进行选项卡控制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14978224/
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
Using radio buttons for tab control using bootstrap
提问by Dreamwalker
I am trying to control tabs with radio buttons to change a content area for a scheduling screen. This works fine other than the radio buttons do not check.
我正在尝试使用单选按钮控制选项卡以更改日程安排屏幕的内容区域。除了不检查单选按钮之外，这工作正常。
Anyone got any ideas how to fix this?
任何人有任何想法如何解决这个问题？
<div>
<div>
<input id="optDaily" name="intervaltype" checked type="radio" data-target="#scheduleDaily" data-toggle="tab">
<label for="optDaily">Daily</label>
</div>
<div>
<input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly" data-toggle="tab">
<label for="optWeekly">Weekly</label>
</div>
<div>
<input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly" data-toggle="tab">
<label for="optMonthly">Monthly</label>
</div>
</div>
<div class="tab-content">
<div id="scheduleDaily" class="tab-pane active schedule-pane" >
Daily
</div>
<div id="scheduleWeekly" class="tab-pane schedule-pane" >
Weekly
</div>
<div id="scheduleMonthly" class="tab-pane schedule-pane" >
Montly
</div>
</div>
Here is the example in jsfiddle http://jsfiddle.net/nEWMq/
这是 jsfiddle http://jsfiddle.net/nEWMq/ 中的示例
回答by Adam Taylor
The radio buttons aren't getting checked because of this code:
由于此代码，未检查单选按钮：
e.preventDefault()
To fix this, remove data-toggle="tab"from the radio buttons and then add this jQuery code:
要解决此问题，请data-toggle="tab"从单选按钮中删除，然后添加以下 jQuery 代码：
$('input[name="intervaltype"]').click(function () {
$(this).tab('show');
});
回答by Yevgeniy Afanasyev
Bootstrap 4.3.1 working tabs as radio buttons
Bootstrap 4.3.1 工作标签作为单选按钮
$(document).ready(function () {
$('input[name="intervaltype"]').click(function () {
$(this).tab('show');
$(this).removeClass('active');
});
})<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<div>
<input id="optDaily" checked name="intervaltype" type="radio" data-target="#scheduleDaily">
<label for="optDaily">Daily</label>
</div>
<div>
<input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly">
<label for="optWeekly">Weekly</label>
</div>
<div>
<input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly">
<label for="optMonthly">Monthly</label>
</div>
</div>
<div class="tab-content">
<div id="scheduleDaily" class="tab-pane active">Daily</div>
<div id="scheduleWeekly" class="tab-pane">Weekly</div>
<div id="scheduleMonthly" class="tab-pane">Montly</div>
</div>回答by Monzur
Try this works for me
试试这对我有用
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<div class="row">
<div class="span12">
<p class="lead">Bare minimum radio button tabs example:</p>
<div id="tab" class="btn-group" data-toggle="buttons">
<a href="#prices" class="btn btn-default active" data-toggle="tab">
<input type="radio" />Prices</a>
<a href="#features" class="btn btn-default" data-toggle="tab">
<input type="radio" />Features</a>
<a href="#requests" class="btn btn-default" data-toggle="tab">
<input type="radio" />Requests</a>
<a href="#contact" class="btn btn-default" data-toggle="tab">
<input type="radio" />Contact</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
<div class="tab-pane" id="requests">Requests Content</div>
<div class="tab-pane" id="contact">Contact Content</div>
</div>
</div>
</div>
</div>