JQuery Tab选项卡效果代码改进版
2020-02-28 04:05:35
供稿：网友
介绍的是基于JQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程中，只 要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。
在这里，我又做了部分的修改，增加了选项卡可自动切换功能，以及选项卡点击相应还是鼠标放上后相应的参数，同时依然支持多次调用。
现在，我把代码贴上，与众博友共享
这是js脚本
代码如下:
/* 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
*/
//注意：如果调试出错，请检查您引用的jquery版本号，当前引用版本为1.3
//参数说明：
//tabList:包裹选项卡的父级层
//tabTxt :包裹内容层的父级层
//options.currentTab:激活选项卡的序列号
//options.defaultClass:当前选项卡激活状态样式名，默认名字为“current”
//isAutoPlay:是否自动切换
//stepTime:切换间隔时间
//switchingMode:切换方式（'c'表示click切换;'o'表示mouseover切换）
//调用方式 如本页最下方代码
$.fn.tabs = function(tabList, tabTxt, options) {
var _tabList = $(this).find(tabList);
var _tabTxt = $(this).find(tabTxt);
//为了简化操作，强制规定选项卡必须用li标签实现
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);
//强制规定内容层必须以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" });
