html – 使用单选按钮进行tab控制使用引导

我正在尝试使用单选按钮控制标签,以更改调度屏幕的内容区域.除了单选按钮不检查外,这样做还不错.

任何人有任何想法如何解决这个问题？

<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/中的例子

解决方法

由于 this code,单选按钮没有被检查：

e.preventDefault()

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

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

原文地址：https://www.jb51.cc/html/223820.html