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:
$ (". Tabwrap"). Tabs ({
Tablist: ". Tabbox li",//tab list
Tabcontent: ". Tabcontent. Tcon",//Content box
Tabon: "On",//Current tab class name
Action: "MouseOver"//event, mouseover or click
});
}); |
Small Tips
This article does not provide jquery library files, you can go to the official download the latest version of.
