jquery Simple Implementation page Option Carter effect _jquery

Css:

Copy Code code as follows:

. clear{clear:both; height:0px; overflow:hidden;}
. tab{width:400px; font-size:12px;}
. Tab_menu ul{padding:0px;margin:0px;}
. tab_menu Li{list-style:none; display:block; float:left;
Background: #C2CEFE; height:22px; line-height:22px;
padding:0px 8px; margin-right:6px; border: #86B4CA 1px solid;
}
box{width:400px height:200px; Overflow:hidden border: #A8C9D9 1px solid; padding:10px 8px;}
. Tab_menu ul Li.selected{background: #dadada; cursor:pointer;}
. Hide{display:none;}

Jquery:

Copy Code code as follows:

$ (function () {
var $menu _li = $ ("Div.tab_menu ul Li"); Select Web Page tab
$menu _li.click (function () {
$ (this). AddClass ("selected")//Current <li> Highlight
. siblings (). Removeclass ("selected"); Get rid of other peers <li> highlights
var index = $menu _li.index ($ (this)); Index of <li> child nodes found
$ ("Div.tab_box > div"). EQ (index). Show ()///index n DIV display
. siblings (). Hide (); Other tabs are hidden
})
})

Html:

Copy Code code as follows:

<div class= "tab" >
<div class= "Tab_menu" >
<ul>
<li class= "Selected" > Personal information </li>
<li class= "selected" > My photos </li>
<li class= "selected" > My blog </li>
<div class= "Clear" ></div>
</ul>
</div>
<div class= "Tab_box" >
<div class= "box" > My qq:123456</div>
<div class= "box Hide" >hi </div>
<div class= "box hide" > Hello <br> </div>
</div>
</div>