The introduction is based on jquery implementation of a tab effect, the focus is reflected in the HTML does not inline event handler, but defined in the JS file, to do the separation of behavior and structure. In the actual application process, as long as the structure of the tab module to ensure the integrity of the code, you can add any of the same kind of tabs, do not need to manually bind the event handler in HTML and add an ID to the content layer to hide the display.
Here, I have made some changes, added the tab can automatically switch features, as well as the tab click on the corresponding or mouse after the corresponding parameters, while still supporting multiple calls.
Now, I'll post the code and share it with my friends.
This is the JS script
Copy Code code as follows:
/* Jquery-fn-accordion V0
* Based on JQuery JavaScript Library v3
* http://jquery.com/
*
* The author of the following code:miqi2214, Wbpbest
* Blog:eycbest.cnblogs.com, miqi2214.cnblogs.com
* DATE:2010-3-10
*/
Note: If debugging fails, please check the jquery version number that you are referencing, the current reference version is 1.3
Parameter description:
Tablist: Parent Layer of package tab
Tabtxt: The parent layer of the package content layer
Options.currenttab: Activate the TAB's serial number
Options.defaultclass: Current tab Activates State style name, default name is
Isautoplay: whether to switch automatically
Steptime: Toggle time interval
Switchingmode: Toggle Mode (' C ' means click Switch; O ' means mouseover switch)
Called as the bottom code on this page
$.fn.tabs = function (Tablist, tabtxt, options) {
var _tablist = $ (this). Find (Tablist);
var _tabtxt = $ (this). Find (Tabtxt);
In order to simplify the operation, the mandatory tab must be implemented with the LI tag
var Tablistli = _tablist.find ("Li");
var defaults = {currenttab:0, Defaultclass: "Current", Isautoplay:false, steptime:2000, Switchingmode: "C"};
var o = $.extend ({}, defaults, options);
var _isautoplay = O.isautoplay;
var _steptime = O.steptime;
var _switchingmode = O.switchingmode;
_tablist.find ("Li:eq (" + O.currenttab +) "). AddClass (O.defaultclass);
Enforce that the content layer must be implemented with DIV
_tabtxt.children ("div"). each (function (i) {
$ (this). attr ("id", "wp_div" + i);
). EQ (o.currenttab). CSS ({"Display": "Block"});
Tablistli.each (
function (i) {
$ (Tablistli[i]). MouseOver (
function () {
if (_switchingmode = = "O") {
$ (this). Click ();
}
_isautoplay = false;
}
);
$ (Tablistli[i]). Mouseout (
function () {
_isautoplay = true;
}
)
}
);
_tabtxt.each (
function (i) {
$ (_tabtxt[i]). MouseOver (
function () {
_isautoplay = false;
}
);
$ (_tabtxt[i]). Mouseout (
function () {
_isautoplay = true;
}
)
});
// }
else {
Tablistli.each (
function (i) {
$ (Tablistli[i]). Click (
function () {
if ($ (this). ClassName!= O.defaultclass) {
$ (this). addclass (O.defaultclass). Siblings (). Removeclass (O.defaultclass);
}
if ($.browser.msie) {
_tabtxt.children ("div"). EQ (i). Siblings (). css ({"Display": "None"});
_tabtxt.children ("div"). EQ (i). FadeIn (600);
} else {
_tabtxt.children ("div"). EQ (i). CSS ({"Display": "Block"}). Siblings (). css ({"Display": "None"}); Standard Style
}
}
)
}
);
// }
function Selectme (oo) {
if (oo!= null && oo.html ()!= null && _isautoplay) {
Oo.click ();
}
if (oo.html () = null) {
Selectme (_tablist.find ("Li"). EQ (0));
} else {
Window.settimeout (Selectme, _steptime, Oo.next ());
}
}
if (_isautoplay) {
Alert ("_isautoplay:" + _isautoplay);
Selectme (_tablist.find ("Li"). EQ (o.currenttab));
}
alert (_isautoplay);
return this;
};
var userName = "Wbpbest";
var __sti = setinterval;
Window.setinterval = function (callback, timeout, param) {
var args = Array.prototype.slice.call (arguments, 2);
var _CB = function () {
Callback.apply (null, args);
}
__sti (_CB, timeout);
}
Window.setinterval (Hello,3000,username);
var __sto = settimeout;
Window.settimeout = function (callback, timeout, param) {
var args = Array.prototype.slice.call (arguments, 2);
var _CB = function () {
Callback.apply (null, args);
}
__sto (_CB, timeout);
}
Demo Address: http://demo.jb51.net/js/wbpbest/index.html
Package Download Address http://www.jb51.net/jiaoben/25569.html
