javascript - HTML tabs is not working sample -
i want display data in tabs , here data displaying in single tab. 1 please 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 div data displaying in first tab , remaining div data 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
, jquery-ui.js
file. demo here
Comments
Post a Comment