JQuery Tab tab effect code improved version

JQuery Tab tab effect code improved version_jquery

WBOY

Release： 2016-05-16 18:30:47

Original

888 people have browsed it

What is introduced is a tab effect based on JQuery. The key point is that there is no inline event handler in HTML, but is defined in a js file to achieve the separation of behavior and structure. In actual application, as long as the integrity of the tab module structure code is ensured, N tabs of the same type can be added arbitrarily. There is no need to manually bind event handlers in HTML and add IDs to the content layer to be hidden.
Here, I made some modifications, adding the function of automatically switching tabs, and the parameters corresponding to whether the tab is clicked or the mouse is placed, while still supporting multiple calls.
Now, I paste the code and share it with fellow bloggers
This is a js script

Copy the 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 error, please check the jquery version number you quoted, the current reference version is 1.3 
//Parameter description: 
//tabList: The parent layer of the wrapped tab 
//tabTxt: The wrapped content layer Parent layer
//options.currentTab: the serial number of the activated tab
//options.defaultClass: the current tab activation status style name, the default name is "current" 
//isAutoPlay: whether it is automatic Switching
//stepTime: switching interval
//switchingMode: switching mode ('c' means click switching; 'o' means mouseover switching) 
//The calling method is 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); 
//In order to simplify the operation, it is mandatory that tabs must be implemented with li tags 
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); 
//It is mandatory that the content layer must be div to implement 
_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); 
} 