JQ tab tab

JQ Options Card is very simple, the attention is his structure naming (there are many on the internet, which is not a norm)

1.tab

2.TAB-HD (Options Bar)

3.TAB-BD (the options bar corresponds to the content)

CSS code (layout no problem, can only see jquery code)

*{padding:0; margin:0;} UL {List-style:none;}. tab {width:450px; height:200px; overflow:hidden; border:1px solid #ccc; margin:0 Auto;}. Tab-hd ul {Overflow:hidden;  Margin-left: -4px; }.tab-hd li {float:left; width:150px; border-left:1px solid #ccc; border-bottom:1px solid #ccc; line-height:50px; font -size:24px; Text-align:center; Cursor:pointer;}. TAB-HD li.selected {border-bottom:none;}. TAB-BD li {display:none; font-size:30px; line-height:5; text-align:center;}

HTML code:

<div class= "tab" ><div class= "TAB-HD" ><ul><li class= "selected" > Project I </li><li> project two </li><li> Project three </li></ul></div><div class= "TAB-BD" ><ul><li style= " Display:block; " >111111</li><li>222222</li><li>333333</li></ul></div></div>

JQ Code:

$ (function () {$ ('. Tab-hd li '). Click (function () {$ (this). AddClass (' selected '). Siblings (). Removeclass (' selected '); /This can be written as the following code/* $ ('. Tab-hd li '). Removeclass (' selected '); $ (this). AddClass (' selected '); */$ ('. tab-bd li '). Hide (). EQ ($ (this). Index ()). Show ();}). Hover (function () {//can add other animation effects});})

　　

JQ tab tab