Question

我有这个代码用于标签，我想要的是tab2默认是禁用的，只有在用户检查tab1上的checkbox1时才会启用对此有何帮助？

＆＃13;

     <!-- Custom Tabs  -->
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs pull-right">
                    <li><a href="#tab_3-2" target="_self" data-toggle="tab">Tab 3</a></li>
                    <li><a href="#tab_2-2" target="_self" data-toggle="tab">Tab 2</a></li>
                    <li class="active"><a href="#tab_1-1" target="_self" data-toggle="tab">Tab1</a></li>
                    <li class="pull-left header"><i class="fa fa-user-plus" aria-hidden="true"></i>Testo</li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1-1">
					
					<div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"id="cb1"> check1
                                        </label>
                                    </div>
                                </div>
                            </div>
   
   </div>
   <div class="tab-pane" id="tab_3-2">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                        It has survived not only five centuries, but also the leap into electronic typesetting,
                        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
                        like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                    <!-- /.tab-pane -->
					 </div>
                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
            </div>
            <!-- nav-tabs-custom -->
            <!-- END CUSTOM TABS -->

＆＃13;

提前致谢

Answer 1

此方法运行正常，您需要添加触发器，以便在设置复选框时检查选项卡是否已启用，从data-toggle删除值将禁用选项卡，只需将其重新添加到启用。如下所示。要默认禁用标签2，请直接在HTML中省略data-toggle中的值。

我冒昧地将引导依赖项添加到此代码段中，假设您的项目中有它们可用。

function toggle_tab2() {
  if ($('#tab2').attr("data-toggle") != '') {
    $('#tab2').attr("data-toggle","");
    console.log('tab2 disabled');
  }
  else {
    $('#tab2').attr("data-toggle","tab");
    console.log('tab2 enabled');
  }
}

<link href=http://getbootstrap.com/dist/css/bootstrap.min.css rel=stylesheet>
<!-- Custom Tabs  -->
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li><a href="#tab_3-2" target="_self" data-toggle="tab">Tab 3</a></li>
                    <li><a href="#tab_2-2" target="_self" data-toggle="" id="tab2">Tab 2</a></li>
                    <li class="active">
                      <a href="#tab_1-1" target="_self" data-toggle="tab">Tab1</a>
                    </li>
                    <li class="pull-left header">
                    
                    <a>
                      <i class="fa glyphicon glyphicon-plus" aria-hidden="true"></i>
                      Testo
                    </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1-1">
					
					                  <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"id="cb1" onclick="toggle_tab2();"> check1
                                        </label>
                                    </div>
                                </div>
                            </div>
   
                    </div>
                           <div class="tab-pane" id="tab_3-2">
                                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                It has survived not only five centuries, but also the leap into electronic typesetting,
                                                remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                                                sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
                                                like Aldus PageMaker including versions of Lorem Ipsum.
                            </div>

                </div>

            </div><!-- /.nav-tabs-custom -->
            
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

基于复选框的活动标签

1 个答案: