Question

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

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

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

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

评论中已经说过，这实际上并不是这样做的，但是由于你坚持使用复选框和bootstrap的标签，以下是如何操作：

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

为了模仿这种行为，我必须模仿bootstrap显示/隐藏标签的方式，并负责显示/隐藏自己的标签。

这是代码：

＆＃13;

$('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');
    }
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

同样，我真的反对使用此代码。

Answer 2

我认为这可以实现您的目标。它所做的只是在两者之间传递活动类：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如果选中或取消选中，如何使用复选框在标签之间切换？

2 个答案: