JQuery simple webpage tab special effect _ jquery-js tutorial

This article will share with you a piece of simple jQuery-based webpage tab code, which is very simple and practical. We recommend it to you here. CSS:

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

JQuery:

The Code is as follows:

$ (Function (){
Var $ menu_li = $ ("p. tab_menu ul li"); // select the webpage Tab
$ 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"). eq (index). show () // The DIV whose index is N is displayed.
. Siblings (). hide (); // hide other tabs
})
})

Html:

The Code is as follows:

• Personal Information


• My photos


• My blog

Myqq: 123456

Hi

Hello