带有Bootstrap togglabe选项卡的html表单,单选按钮

Question

更新1:

在第一个回复JSFiddle上使用解决方案后,选项卡无法正常工作

原始问题:

我有一个引导程序可切换标签和单选按钮的问题,当我在标签之间切换时,单选按钮将不会被选中

<form id="frontendEditor" class="col-sm-8 col-sm-offset-2">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
                <input type="radio" name="type" value="status" checked>
            </a>
        </li>
        <li role="presentation">
            <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
                <input type="radio" name="type" value="post">
            </a>
        </li>
        <li role="presentation">
            <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
                <input type="radio" name="type" value="story">
            </a>
        </li>
        <li role="presentation">
            <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
                <input type="radio" name="type" value="novel">
            </a>
        </li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">...</div>
        <div role="tabpanel" class="tab-pane" id="profile">...</div>
        <div role="tabpanel" class="tab-pane" id="messages">...</div>
        <div role="tabpanel" class="tab-pane" id="settings">...</div>
    </div>


</form>

JSFIDDLE:https://jsfiddle.net/7xot0jqq/2/

Answer 1

只需添加以下jQuery代码:

$(function () {
    $('input:radio').click(function (e) {
       e.stopPropagation();
       $('li').removeClass('active')
       $(this).parent().parent().addClass('active');
       var tabpane = $(this).parent().attr('aria-controls');
       $('.tab-content').children().removeClass('active');
       $('#' + tabpane).addClass('active');
    });
    $('a').click(function (e) {
       $(this).find("input[type=radio]").trigger('click');
    });
});

工作示例:JSFiddle