JQuery tab plug-in instructions

The tab plug-in is one of the thousands of jquery plug-ins. Next I will introduce you to the jQuery tab plug-ins (source code) and detailed instructions for use.

Instance 1

JQuery tab plug-in structure:

The Code is as follows:

Copy code

<Div class = "tabWrap"> <Ul class = "tabBox"> <Li> <a href = "# nogo"> tab1 </a> </li> <Li> <a href = "# nogo"> tab2 </a> </li> <Li> <a href = "# nogo"> tab3 </a> </li> <Li> <a href = "# nogo"> tab4 </a> </li> <Li> <a href = "# nogo"> tab5 </a> </li> </Ul> <Div class = "tabContent"> <Div class = "tcon"> 1111 </div> <Div class = "tcon"> 2222 </div> <Div class = "tcon"> 3333 </div> <Div class = "tcon"> 4444 </div> <Div class = "tcon"> 5555 </div> </Div> </Div>

JQuery tab plug-in code:

The Code is as follows:

Copy code

$ (Function (){ $. Fn. tabs = function (options ){ Var settings = { TabList :"", TabContent :"", TabOn :"", Action :"" }; Var _ this = $ (this ); If (options) $. extend (settings, options ); _ This. find (settings. tabContent). eq (0). show (); // The first column is displayed. _ This. find (settings. tabList). eq (0). addClass (settings. tabOn ); If (settings. action = "mouseover "){ _ This. find (settings. tabList). each (function (I ){ $ (This). mouseover (function (){ $ (This). addClass (settings. tabOn). siblings (). removeClass (settings. tabOn ); Var _ tCon = _ this. find (settings. tabContent). eq (I ); _ TCon. show (). siblings (). hide (); }); // Slide over Switching }); } Else if (settings. action = "click "){ _ This. find (settings. tabList). each (function (I ){ $ (This). click (function (){ $ (This). addClass (settings. tabOn). siblings (). removeClass (settings. tabOn ); Var _ tCon = _ this. find (settings. tabContent). eq (I ); _ TCon. show (). siblings (). hide (); }); // Click to switch }); }; };

// Call method:

The Code is as follows:	Copy code
$ (". TabWrap"). tabs ({ TabList: ". tabBox li", // tab list TabContent: ". tabContent. tcon", // content box TabOn: "on", // name of the current tab class Action: "mouseover" // event, mouseover or click }); });

Instance 2

Html code

The Code is as follows:

Copy code

<Div class = "tab"> <Ul class = "tab-hd"> <li> Option 4 </li> <li> Option 5 </li> <li> Option 6 </li> </ul> <Ul class = "tab-bd"> <li> content 4 </li> <li> content 5 </li> <li> content 6 </li> </ul> </Div>   <Div class = "tab"> <Ul class = "tab-hd"> <li> Option 4 </li> <li> Option 5 </li> <li> Option 6 </li> </ul> <Ul class = "tab-bd"> <li> content 4 </li> <li> content 5 </li> <li> content 6 </li> </ul> </Div>

Css code

The Code is as follows:	Copy code
Ul, li {list-style: none ;} . Tab {width: margin PX; margin: 0 auto 50px ;} . Tab-hd {background: # F93; overflow: hidden; zoom: 1 ;} . Tab-hd li {float: left; width: 150px; color: # fff; text-align: center; cursor: pointer ;} . Tab-hd li. active {background: # F60 ;} . Tab-bd li {display: none; padding: 20px; border: 1px solid # ddd; border-top: 0 none; font-size: 24px ;}

 
 
Jquery code

The Code is as follows:

Copy code

$ (Function (){ Function tabs (tabTit, on, tabCon ){ $ (TabCon). each (function (){ $ (This). children (). eq (0). show (); }); $ (TabTit). each (function (){ $ (This). children (). eq (0). addClass (on ); }); $ (TabTit). children (). hover (function (){ $ (This). addClass (on). siblings (). removeClass (on ); Var index = $ (tabTit). children (). index (this ); $ (TabCon). children (). eq (index). show (). siblings (). hide (); }); } Tabs (". tab-hd", "active", ". tab-bd "); });