HTML structure
<ulID= "Tabs"class= "Tabs"> <binData-tab= "Users">Users</Li> <LiData-tab= "Groups">Groups</Li></ul><DivID= "Tabscontent"class= "Tabscontent"> <DivData-tab= "Users"class= "Tab-item">Item1</Div> <DivData-tab= "Groups"class= "Tab-item">Item2</Div></Div>
CSS Styles
. Tabs{width:500px;Height:30px;background:#eee;}. Tabs Li{float: Left;width:250px;Font:18px/30px "Microsoft Yahei";Color:#333;text-align:Center;cursor:Pointer;}. Tabs li.active{background:#0aa;}. Tabscontent{width:498px;Border:1px solid #888;}. tabscontent. Tab-item{Height:250px;width:100%;font-size:45px;Display:None;}. tabscontent. Active{Display:Block;}
JS Script
(function ($) { /** jquery Tabs plugin*/$.fn.tabs=function(Control) {var$element = $ ( This),//switch Contacts li = Tabs$control = $ (Control);//Toggle Content Tab-item = Tabscontent //delegate Li's Click events$element. Delegate ("Li", "click",function () { //li corresponding Data-tab property value varTabName = $ ( This). attr ("Data-tab"); $element. Trigger ("Change.tab", tabname); }); //Change.tab First step: Change Li.active$element. Bind ("Change.tab",function(E, tabname) {$element. Find ("[Data-tab]"). Removeclass ("Active"); $element. Find ("[data-tab=" + TabName + "]"). AddClass ("Active"); }); //Change.tab Second Step: Change Tab-item.active$element. Bind ("Change.tab",function(E, tabname) {$control. Find ("[Data-tab]"). Removeclass ("Active"); $control. Find ("[data-tab=" + TabName + "]"). AddClass ("Active"); }); //Activate the first tab$element. Trigger ("Change.tab", $element. Find ("Li:first"). attr ("Data-tab")); return This;//returns a chained call };}) (jQuery);//Basic Example$ ("#tabs"). Tabs ("#tabsContent");/** Apply extension * When switching tabname write to hash * When Hashchange trigger tabs switch*///when switching, write tabname to hash$ ("#tabs"). Bind ("Change.tab",function(E, tabname) {Location.hash=tabname;});//currently supports Hashchange events in addition to Ie67$ (window). Bind ("Hashchange",function () { varTabName = Location.hash.slice (1); $("#tabs"). Trigger ("Change.tab"), tabname);});