HTML标签不是工作示例

时间:2015-06-04 04:44:04

标签: javascript jquery html jquery-ui

我想在标签中显示数据,但此处我的数据显示在单个标签中。 有人请帮助我。



</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>
&#13;
&#13;
&#13;

此处所有div数据都显示在第一个选项卡中,剩余的div数据未隐藏。

1 个答案:

答案 0 :(得分:2)

&#13;
&#13;
$( "#tabs" ).tabs();
&#13;
<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>
&#13;
&#13;
&#13;

包含jquery-lastest.jsjquery-ui.js文件。的 DEMO HERE