本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示，完全是自己的思考实现过程，分享给大家供大家参考。具体如下：
起初我Html代码架子是这样的：
- 标签1
- 标签2
- 标签3
内容111111
后来换成了下面这个：
之所以换成这个，是因为我觉得 dl dt dd 在页面布局中用的比 div ul li 要少，这样可以做到更好的隔离性。我们用js操作dl dt dd 对象，就会更少的影响到页面内其它元素，还有就是不用在li标签中自定义data-box属性，更符合页面书写标准。而且这个结构的整体感觉也比上面那个好。
插件的实现代码如下：
(function ($) {
$.fn.Tabs = function (options) {
//默认参数设置
var settings = {
beforeCss: "bcss", //激活前样式名
afterCss: "acss", //激活后样式名
model: "mouseover" //切换方式("mouseover"或者"click")
};
//不为空，则合并参数
if (options)
$.extend(settings, options);
//获取a标签集合
var arr_a = $("> dt > a", this);
//给a标签分别绑定事件
arr_a.each(function () {
$(this).bind(settings.model, function (event) {
//去除a标签的锚点跳转
event.preventDefault();
//样式控制
$(this).removeClass().addClass(settings.afterCss)
.siblings("a").removeClass().addClass(settings.beforeCss);
//隐藏与显示控制
var dd_id = $(this).attr("href");
$(dd_id).show().siblings("dd").hide();
});
});
//遵循链式原则
return this.each(function () { });
};
})(jQuery);
之所以说是轻量级，是因为代码量真的很少，也很简单。加了注释相信大家都可以看懂。
其中settings中的model是用来控制切换方式的：
- 当为"click"时，点击实现切换；
- 当为"mouseover"时，鼠标滑入实现切换。
开始时是想用hover来实现鼠标滑入切换的，结果发现，hover不支持bind绑定。因为hover是jquery通过封装 mouseover事件 的产物，它并不是一个正宗的事件，因此无法绑定。
下面给出个DEMO：
效果图如下：
希望本文所述对大家学习jquery程序设计有所帮助。
