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

Question

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

So far I have a checkbox that switches tabs when checked, but when I uncheck it; it doesn't change back.

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

更新: 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

我认为这可以满足您的需求。它所做的只是在两者之间传递事件类:

$('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>