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

Question

更新 1:

使用第一个回复的解决方案后，Tabs 无法正常工作
JSFiddle

原始问题:

我在使用 bootstrap 可切换选项卡和单选按钮时遇到问题，当我在选项卡之间切换时，单选按钮不会被选中

<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