Use the Juery web page tab to implement code _ jquery

Jquery is now popular, and many tabs can be implemented through jquery. First, the front-end code

The Code is as follows:

• Personal Information


• My photos


• My blog

Myqq: 1511109272

Hi

Hello

Then you can set the jquery code.

The Code is as follows:

$ (Function (){
// Switch the webpage Tab
Var $ menu_li = $ ("p. tab_menu ul li ");
$ Menu_li.click (function (){
$ (This). addClass ("selected") // The current

Highlight
. Siblings (). removeClass ("selected"); // remove other peers

Highlighted
Var index = $ menu_li.index ($ (this); // locate

Sub-node Index
$ ("P. tab_box> p") // DIV with an index of N is displayed.
. Eq (index). show ()
. Siblings (). hide ();
})
})

You can set the CCS style.

The 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 ;}