介绍的是基于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 });
_tabtxt.children(div).eq(i).fadein(600);
} else {
_tabtxt.children(div).eq(i).css({ display: block }).siblings().css({ display: none }); //标准样式
}
}
)
}
);
// }
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);
}
演示地址:http://demo.jb51.net/js/wbpbest/index.html
打包下载地址 http://www.jb51.net/jiaoben/25569.html