Instance One
JQuery TAB Plugin 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 shows _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 Toggle }); } 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 Mode:
The code is as follows |
Copy Code |
$ (". Tabwrap"). Tabs ({ Tablist: ". Tabbox li",//tab list Tabcontent: ". Tabcontent. Tcon",//Content box Tabon: "On",//Current tab class name Action: "MouseOver"//event, mouseover or click }); }); |
Example Two
HTML code
The code is as follows |
Copy Code |
<div class= "tab" > <ul class= "TAB-HD" ><li> options 4</li><li> options 5</li><li> Options 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> options 4</li><li> options 5</li><li> Options 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:450px; 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 () { $ (a). 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"); }); |