jquery-based tab tab (practical example)

1. Introduction of documents

<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>

CSS file

@charset "Utf-8";
/* GM * *
Body, Div, DL, DT, DD, UL, OL, Li, H1, H2, H3, H4, H5, H6, pre, Code, form, fieldset, legend, Input, button, textarea, p, blockquote, Th, td {Margin:0; padding:0;}
FieldSet, img {border:0;}
ABBR, acronym {border:0; font-variant:normal;}
body {line-height:1.5;}
OL, ul {list-style:none;}
Table {border-collapse:collapse; border-spacing:0;}
caption, th {text-align:left;}
SUP, sub {font-size:100%; vertical-align:baseline;}
BLOCKQUOTE, q {quotes:none;}
Blockquote:before, Blockquote:after, Q:before, q:after {content: '; content:none;}
: Link,: visited {text-decoration:none;}
: Focus {outline:0;}
body{font-family: ' Microsoft yahei '; background: #ccc;}

/*tab*/
. tab{width:300px; margin:10px Auto;
. tab. tab_menu{width:100% height:32px; Border-bottom: #999 1px dotted;}
. tab. tab_menu ul li{float:left; background: #353744; height:31px; line-height:31px; font-size:14px; width:80px; color:# Fff Text-align:center; margin-right:3px; Cursor:pointer;}
. tab. Tab_menu li.selected {color: #ffea00; transition:all 0.3s ease 0s}
. tab. tab_box{font-size:12px; line-height:24px; margin-top:1px; background: #eee; padding:5px 10px;}
. tab. Tab_box. Hidden{display:none}

2. Add Tab JS

$ (function () {
var $div _li =$ ("Div.tab_menu ul Li");
$div _li.hover (function () {
$ (this). AddClass ("selected")
. siblings (). Removeclass ("selected");
var index = $div _li.index (this);
$ ("Div.tab_box > div")
. EQ (index). Show ()
. siblings (). Hide ();
})
})

3.TAB structure

<div class= "tab" >
<div class= "Tab_menu" >
<ul>
<li class= "Selected" >1</li>
<li>2</li>
</ul>
</div>
<div class= "Tab_box" >
<div>1...</div>
<div class= "hidden" >2...</div>
</div>
</div>

Tips:

1.tab.js $div_li.hover for mouse events, can be more click for mouse click events
2.$ ("Div.tab_box > div") Select the child nodes, without selecting the child nodes, if there are div inside, it will cause errors.
The number of 3.tab_menu Li corresponds to the. tab_box > div quantity.