HTML标签不能正常工作 [英] HTML tabs is not working sample
本文介绍了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 =Totalclass =tab active>总计< / div> < div id =USAclass =tab>美国< / div> < div id =ASIAclass =tab> ASIA< / div> < div id =JAPANclass =tab>日本< / div> < div id =LATAMclass =tab> LATAM< / div> < div id =EMEAclass =tab> EMEA< / div> < /表> < / DIV> < / DIV> <脚本> $（＃tabs）.tabs（）; < / script>< / html>
p>此处所有div数据都显示在第一个选项卡中，其余div数据不会隐藏。
解决方案
$（#tabs）.tabs（）;
< link href =https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css =stylesheet/><脚本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 =Totalclass =tab active>总计< / div> < div id =USAclass =tab>美国< / div> < div id =ASIAclass =tab> ASIA< / div> < div id =JAPANclass =tab>日本< / div> < div id =LATAMclass =tab> LATAM< / div> < div id =EMEAclass =tab> EMEA< / div> < /表> < / div>
包含 jquery -lastest.js 和 jquery-ui.js 文件。 在此处示范
i want to display the data in tabs , but here my data is displaying in single tab. some one please help me out .
</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>
here all the div data is displaying in the first tab , remaining div data is not hiding .
解决方案
$( "#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>
Include jquery-lastest.js and jquery-ui.js file. DEMO HERE
这篇关于HTML标签不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
