多个引导选项卡

Dennis 发表于 Dev

101

丹尼斯

我在一页上有2个div。在div中，我具有标签容器，但是单击1个tabcontainer内的标签中的1个，也会影响另一个容器的标签。也许是我正在使用的CSS导致问题。我想念什么吗？这是我的代码

$("ul.container-tabs a").click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="system">
  <div class="container-tabbed">
    <ul class="container-tabs">
      <li><a href="#system_main" class="active">main</a></li>
      <li><a href="#system_tab_2">tab2</a></li>
      <li><a href="#system_tab_3">tab3</a></li>
    </ul>
    <div class="tab-content">
      <div class="container-tab active" id="system_main">
        <div class="wrapper wrapper-white">
          <div class="page-subtitle">
            system main
          </div>
        </div>
      </div>
      <div class="container-tab" id="system_tab_2">
        <div class="wrapper wrapper-white">
          <div class="page-subtitle">
            tab2
          </div>
        </div>
      </div>
      <div class="container-tab" id="system_tab_3">
        <div class="wrapper wrapper-white">
          <div class="page-subtitle">
            tab3
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="theme" style="display: none">
  <div class="container-tabbed">
    <ul class="container-tabs">
      <li><a href="#theme_main" class="active"><i class="fa fa-th-large"></i></a></li>
    </ul>
    <div class="tab-content">
      <div class="container-tab active" id="theme_main">
        <div class="wrapper wrapper-white">
    	  <div class="page-subtitle">
    		theme main
    	  </div>
    	</div>
      </div>
    </div>
  </div>
</div>

谁能看到我做错了吗？

Shiladitya

在这里你有一个解决方案

$("ul.container-tabs a").click(function (e) {
  $($(this).attr('href'))
    .show()
    .siblings('.container-tab')
    .hide();
});

.container-tab {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="system">
<div class="container-tabbed">
  <ul class="container-tabs">
    <li><a href="#system_main" class="active">main</a></li>
    <li><a href="#system_tab_2">tab2</a></li>
    <li><a href="#system_tab_3">tab3</a></li>
  </ul>
  <div class="tab-content">
    <div class="container-tab active" id="system_main">
      <div class="wrapper wrapper-white">
        <div class="page-subtitle">
          system main
        </div>
      </div>
    </div>
    <div class="container-tab" id="system_tab_2">
      <div class="wrapper wrapper-white">
        <div class="page-subtitle">
          tab2
        </div>
      </div>
    </div>
    <div class="container-tab" id="system_tab_3">
      <div class="wrapper wrapper-white">
        <div class="page-subtitle">
          tab3
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<div id="theme" style="display: none">
<div class="container-tabbed">
  <ul class="container-tabs">
    <li><a href="#theme_main" class="active"><i class="fa fa-th-large"></i></a></li>
  </ul>
  <div class="tab-content">
    <div class="container-tab active" id="theme_main">
      <div class="wrapper wrapper-white">
      <div class="page-subtitle">
      theme main
      </div>
    </div>
    </div>
  </div>
</div>
</div>

错误：您忘记隐藏其他选项卡（单击的选项卡除外）

希望这会帮助你。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。