Question

我在1页上有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>

谁能看到我做错了什么？

Answer 1

您可以使用解决方案

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

export default Hello;

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

.container-tab {
  display: none;
}

错误：你忘了隐藏其他标签（点击的标签除外）

希望这会对你有所帮助。

多个引导选项卡

1 个答案: