使用单选按钮进行使用引导程序的选项卡控制 [英] Using radio buttons for tab control using bootstrap

问题描述

我试图通过单选按钮控制选项卡以更改计划屏幕的内容区域。这可以正常工作，除了单选按钮不检查。

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>

以下是jsfiddle http://jsfiddle.net/nEWMq/

Here is the example in jsfiddle http://jsfiddle.net/nEWMq/

推荐答案

单选按钮没有被检查，因为此代码：

The radio buttons aren't getting checked because of this code:

e.preventDefault()

要解决这个问题，请从单选按钮中移除 data-toggle =tab，然后添加这个jQuery代码：

To fix this, remove data-toggle="tab" from the radio buttons and then add this jQuery code:

$('input[name="intervaltype"]').click(function () {
    $(this).tab('show');
});

这篇关于使用单选按钮进行使用引导程序的选项卡控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！