Using JS to control the hiding and display of tabs

By using the UL and Div, the display and hiding of tabs is realized by means of jquery.

<form action= "" method= "POST" >
<div>
<ul>
<li><a id= "Atab1" class= "Atab" > Kikikiki </a></li>
<li><a id= "atab2" class= "Atab" > Laptop </a></li>
<li><a id= "atab3" class= "Atab" > Letter and Letter </a></li>
<li><a id= "ATAB4" class= "Atab" > Interest-bearing </a></li>
<li><a id= "atab5" class= "Atab" > Ha ha </a></li>
</ul>
</div>

<div >
<div class= "tab" id= "Tab1" >

</div>
<!--End #tab1--
<div class= "tab" id= "TaB2" >

</div>
<!--End #tab2--
<div class= "tab" id= "Tab3" >

</div>
<!--End #tab3--
<div class= "tab" id= "TAB4" >

</div>
<!--End #tab4--
<div class= "tab" id= "Tab5" >

</div>
<!--End #tab5--
</div>
</form>

<script type= "Text/javascript" >
$ (document). Ready (function (e) {
$ ('. tab '). each (function (e) {
if (E = = 0)
$ (this). Show ();//The first time the load is first displayed by default
Else
$ (this). Hide ();
});
})
Bind each Atab to an order-click event
$ ('. Atab '). Bind (' click ', function () {
$ ('. tab '). hide ();//Hides all content
var attr = $ (this). attr (' id ');
var id = ' # ' + attr.substring (1, attr.length);
$ (ID). Show ();//Display the currently selected item
});
</script>

Using JS to control the hiding and display of tabs