javascript - HTML 选项卡无法正常工作示例

我想在选项卡中显示数据，但这里我的数据显示在单个选项卡中。请有人帮帮我。

</head>

<body>
    <div id='childarpt' class='childarpt'>
        </br>
        <div id="tabs">
            <ul>
                <li class="active "><a href="#Total "><span>Total</span></a></li>
                <li><a href="#USA "><span>USA</span></a></li>
                <li><a href="#ASIA "><span>ASIA</span></a></li>
                <li><a href="#JAPAN "><span>JAPAN</span></a></li>
                <li><a href="#LATAM "><span>LATAM</span></a></li>
                <li><a href="#EMEA "><span>EMEA</span></a></li>
            </ul>
            <table id='myTable' border='0'>
                <div id="Total " class="tab active ">
                    Total
                </div>
                <div id="USA " class="tab ">
                    USA
                </div>
                <div id="ASIA " class="tab ">
                    ASIA
                </div>
                <div id="JAPAN " class="tab ">
                    JAPAN
                </div>
                <div id="LATAM " class="tab ">
                    LATAM
                </div>
                <div id="EMEA " class="tab ">
                    EMEA
                </div>
            </table>
        </div>
    </div>
    <script>
    $("#tabs ").tabs();
    </script>
</body>

</html>

这里所有的div数据都显示在第一个选项卡中，其余的div数据没有隐藏。

最佳答案

$( "#tabs" ).tabs();

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id='childarpt' class='childarpt' ></br>
  <div id="tabs"><ul>
  <li class="active"><a href="#Total"><span>Total</span></a></li>
  <li><a href="#USA"><span>USA</span></a></li>
  <li><a href="#ASIA"><span>ASIA</span></a></li>
  <li><a href="#JAPAN"><span>JAPAN</span></a></li>
  <li><a href="#LATAM"><span>LATAM</span></a></li>
  <li><a href="#EMEA"><span>EMEA</span></a></li>
  </ul>
  <table id='myTable' border='0'>

  <div id="Total" class="tab active">
  Total
  </div>
   <div id="USA" class="tab">
   USA
  </div>
  <div id="ASIA" class="tab">
    ASIA
  </div>
   <div id="JAPAN" class="tab">
   JAPAN
  </div>
   <div id="LATAM" class="tab">
   LATAM
  </div>
   <div id="EMEA" class="tab">
   EMEA
  </div>
 
  </table>
  </div>

包含 jquery-lastest.js 和 jquery-ui.js 文件。 <强> DEMO HERE

关于javascript - HTML 选项卡无法正常工作示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30635102/

javascript - HTML 选项卡无法正常工作示例

上一篇：javascript - RequireJs VS Browserify 哪个最适合JS优化

下一篇：javascript - 单击时对象未定义