JQuery tab Toggle

JQuery tab switch, the following code:

 
 

  
  

  
(function ($) {
  
  

  
$. Hovertabs=function (options) {
  
  

  
var ops=$.extend ($. Hovertabs.defaults,options);
  
  

  
This.tabs=ops.tabs;
  
  

  
this.tabcontents=ops.tabcontents;
  
  

  
this.curindex=0;
  
  

  
This.intevaltime=ops.intevaltime;
  
  

  
var _this=this;
  
  

  
This.showtab=function () {
  
  

  
_this.cleartime ();
  
  

  
var curtab=$ (_this.tabs[_this.curindex]);
  
  

  
_this.timeout=settimeout (function () {
  
  

  
_this.tabs.each (function (j) {
  
  

  
$ (this). Removeclass ("a" + (j+1) + "_current");
  
  

  
});
  
  

  
Curtab.addclass ("a" + (_this.curindex+1) + "_current");
  
  

  
_this.tabcontents.hide ();
  
  

  
Extension, you can first detect whether the content of the HTML has been loaded, if not loaded can have AJAX operations
  
  

  
_this.tabcontents.eq (_this.curindex). Show ();
  
  

  
},_this.intevaltime);
  
  

  
};
  
  

  
This.cleartime=function () {
  
  

  
Cleartimeout (_this.timeout);
  
  

  
}
  
  

  
_this=this;
  
  

  
$ (_this.tabs). Each (function (i) {
  
  

  
$ (this). Hover (function () {
  
  

  
_this.curindex=i;
  
  

  
_this.showtab ();
  
  

  
},
  
  

  
function () {
  
  

  
_this.cleartime ();
  
  

  
});
  
  

  
});
  
  

  
};
  
  

  
$. Hovertabs.defaults = {
  
  

  
Tabs:null,//tab title
  
  

  
Tabcontents:null,//tab content
  
  

  
INTEVALTIME:100//Delay time interval
  
  

  
};
  
  

  
}) (JQuery);