Use the Juery web page tab to implement code

First, the front-end code
Copy codeThe Code is 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: 1511109272 </div>
<Div class = "box hide"> hi </div>
<Div class = "box hide"> hello <br> </div>
</Div>
</Div>

Then you can set the jquery code.
Copy codeThe Code is as follows:
$ (Function (){
// Switch the webpage Tab
Var $ menu_li = $ ("div. tab_menu ul li ");
$ Menu_li.click (function (){
$ (This). addClass ("selected") // The current <li> highlight
. Siblings (). removeClass ("selected"); // remove the highlight of other peers <li>
Var index = $ menu_li.index ($ (this); // locate the index of the <li> subnode
$ ("Div. tab_box> div") // The DIV whose index is N is displayed.
. Eq (index). show ()
. Siblings (). hide ();
})
})

You can set the CCS style.
Copy codeThe Code is 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 ;}