A complete method has been encapsulated in the simplified version of the tabs produced by JQuery. This section describes a tab effect implemented based on JQuery. It focuses on the fact that there is no inline event handler in HTML, but is defined in the js file to separate behavior and structure. In actual application, you can add N similar tabs to ensure the integrity of the structure code of the tab module, you do not need to manually bind an event handler to HTML and add an ID to the content layer to hide the display.
Here, I have made some changes, added the function of automatically switching tabs, and clicked the corresponding tab or put the corresponding parameters. At the same time, it still supports multiple calls.
Now, I have pasted the code and shared it with many bloggers.
This is a js script.
The Code is 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 a debugging error occurs, check the jquery version number that you reference. The currently referenced version is 1.3.
// Parameter description:
// TabList: parent layer of the package Tab
// TabTxt: parent layer of the Package content Layer
// Options. currentTab: Serial number of the activation Tab
// Options. defaultClass: name of the activation status style on the current tab. The default name is "current"
// IsAutoPlay: whether to automatically switch
// StepTime: Switching Interval
// SwitchingMode: Switch Mode ('C' indicates click switch; 'O' indicates mouseover switch)
// Call method, as shown in the code at the bottom of this page
$. Fn. tabs = function (tabList, tabTxt, options ){
Var _ tabList = $ (this). find (tabList );
Var _ tabTxt = $ (this). find (tabTxt );
// To simplify the operation, the mandatory tab must be implemented using the li label.
Var tabListLi = _ tabList. find ("li ");
Var defaults = {currentTab: 0, defaultClass: "current", isAutoPlay: false, step time: 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 using p
_ TabTxt. children ("p"). each (function (I ){
$ (This). attr ("id", "wp_p" + I );
Registry.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 ("p" ).eq( I ).siblings().css ({"display": "none "});
_ TabTxt. children ("p"). eq (I). fadeIn (600 );
} Else {
_ TabTxt. children ("p" ).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
Packaging http://www.jb51.net/jiaoben/25569.html