选中或未选中时，如何使用复选框在选项卡之间切换？

Question

我创建了一个复选框，其中包含两组不同的选项卡，应根据是否选中该复选框来显示或隐藏这些选项卡。

到目前为止，我有一个复选框可以在选中时切换选项卡，但是在我取消选中时可以切换选项卡。 它不会变回来。

我可以对代码进行哪些更改以使复选框处于选中状态或关闭状态以切换选项卡？

更新： https ： //jsfiddle.net/gtcf3y5d/

HTML：

        <li role="tab">
            <label data-target="#Custom">
                <input id="custom-mark" name="intervaltype" type="checkbox" />
                Custom
            </label>
        </li>

    <!-- Tab panes -->
    <div class="tab-content">

        <div role="tabpanel" class="tab-pane" id="Custom">
            <h3>Custom...</h3>
        </div>

         <div role="tabpanel" class="tab-pane active" id="Types">
            <h3>Regular</h3>
        </div>


    </div>

</div>

CSS：

body {
    padding: 1em;
}

/* Mimic Bootstrap's .nav-tabs>li(.active)>a 
   when using radio buttons instead of links in tab headers */
.nav-tabs>li>label
{
    display: inline-block;
    padding: 1em;
    margin: 0;
    border: 1px solid transparent;
    cursor: pointer;
}
.nav-tabs>li.active>label
{
    cursor: default;
    border-color: #ddd;
    border-bottom-color: white;
}

JS：

$('input[name="intervaltype"]').click(function () {
    //jQuery handles UI toggling correctly when we apply "data-target" attributes and call .tab('show') 
    //on the <li> elements' immediate children, e.g the <label> elements:
    $(this).closest('label').tab('show');
});

Answer 1

它已经在评论中指出，这确实不是这样做的方法，但是由于您坚持使用复选框和引导程序的选项卡，因此请按照以下步骤操作：

引导程序选项卡的工作方式是，应打开特定选项卡的每个元素都应可见且可单击，并具有data-target或href属性，该属性指定单击时应显示的选项卡。

为了模拟这种行为，我必须模拟引导程序显示/隐藏选项卡的方式，并注意显示/隐藏自己的选项卡。

这是代码：

 $('input[name="intervaltype"]').click(function () { tabpanel = $(this).parents('[role=tabpanel]') tabpanel.find('.tab-content .tab-pane').removeClass('active'); if ($(this).is(':checked')) { tabpanel.find($(this).data('tab-checked')).addClass('active'); } else { tabpanel.find($(this).data('tab-unchecked')).addClass('active'); } }); 

 body { padding: 1em; } /* Mimic Bootstrap's .nav-tabs>li(.active)>a when using radio buttons instead of links in tab headers */ .nav-tabs>li>label { display: inline-block; padding: 1em; margin: 0; border: 1px solid transparent; cursor: pointer; } .nav-tabs>li.active>label { cursor: default; border-color: #ddd; border-bottom-color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div role="tabpanel"> <li role="tab"> <label> <input id="custom-mark" name="intervaltype" type="checkbox" data-tab-checked="#Custom" data-tab-unchecked="#Types" />Custom </label> </li> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane" id="Custom"> <h3>Custom...</h3> </div> <div role="tabpanel" class="tab-pane active" id="Types"> <h3>Regular</h3> </div> </div> </div> 

同样，我确实反对使用此代码。

Answer 2

我认为这可以满足您的需求。 它所做的就是在两者之间传递活动类：

 $('input[name="intervaltype"]').click(function () { $('#Custom').toggleClass('active'); $('#Types').toggleClass('active'); }); 

 body { padding: 1em; } /* Mimic Bootstrap's .nav-tabs>li(.active)>a when using radio buttons instead of links in tab headers */ .nav-tabs>li>label { display: inline-block; padding: 1em; margin: 0; border: 1px solid transparent; cursor: pointer; } .nav-tabs>li.active>label { cursor: default; border-color: #ddd; border-bottom-color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div role="tabpanel"> <li role="tab"> <label data-target="#Custom"> <input id="custom-mark" name="intervaltype" type="checkbox" /> Custom </label> </li> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane" id="Custom"> <h3>Custom...</h3> </div> <div role="tabpanel" class="tab-pane active" id="Types"> <h3>Regular</h3> </div> </div> </div>