tab切换插件开发

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

我开发的tab切换插件，基于jquery库，实现tab标签页的切换。
插件的名称为jquery.tabSwitch.js。

插件使用实际项目页面：http://www.shmsa.gov.cn/html/index.html

插件实现代码如下：

;
(function ($) {
$.fn.tabSwitch = function (options) {
//默认值
var defaultVal = {
tabName: 'a',//tab 标签页
tabActiveClass: 'on',//当前显示的tab标签的class
tabContent: 'ul',//tab 标签页对应的内容
tabType: 'mouseenter', // click , mouseenter , mouseleave , mouseout , mouseover 触发tab事件切换的类型
tabIs: true, //页面加载后触发一次tab切换事件（第一个tab页显示内容）
isInndex: false //开始显示，移动到tab后需要隐藏的元素
};
var obj = $.extend(defaultVal, options); // 合并参数 return this.each(function () {
var selObject = $(this);//获取当前对象
var selTabName = selObject.find(obj.tabName);//获取当前对象下的tab标签
var selTabContent = selObject.find(obj.tabContent);//获取当前对象下的tab标签内容 //绑定事件
selTabName.bind(obj.tabType, function () {
//所有的tab移除tabActiveClass
selTabName.removeClass(obj.tabActiveClass);
//当前的tab添加tabActiveClass
$(this).addClass(obj.tabActiveClass);
//所有的tab内容隐藏
selTabContent.hide();
//当前的tab对应的内容显示
selTabContent.eq(selTabName.index(this)).show(); //若存在移动到tab后需要隐藏的元素
if (obj.isInndex) {
//隐藏需要不显示的元素
$(obj.isInndex).hide();
}
}); //页面加载后触发第一个tab显示内容
if (obj.tabIs) {selTabName.eq(0).trigger(obj.tabType);}
//若存在移动到tab后需要隐藏的元素
if (obj.isInndex) {
//当前元素移开后，被隐藏的元素显示
selObject.mouseleave(function (i) {
//所有的tab标签移除tabActiveClass
selTabName.removeClass(obj.tabActiveClass);
//所有的tab标签页对应的内容隐藏
selTabContent.hide();
//被隐藏的元素显示
$(obj.isInndex).show();
});
}
});
}
})(jQuery);

插件使用：

（1）实现tab标签页切换：

实例代码（注：需要引入jquery）

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>tab切换插件--tabSwitch</title>
</head>
<body>
<div class="parent">
<div class="aa" style="cursor: pointer;">
tab1
</div>
<div class="aa" style="cursor: pointer;">
tab2
</div>
<ul class="bb">
<li>tab1 内容</li>
<li>tab1 内容</li>
<li>tab1 内容</li>
</ul>
<ul class="bb">
<li>tab2 内容</li>
<li>tab2 内容</li>
<li>tab3 内容</li>
</ul>
</div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.tabSwitch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.parent').tabSwitch({tabName: '.aa',tabContent: 'ul'})
</script>
</body>
</html>

显示效果：

(2)应用：移动到tab上显示tab的内容，移出tab后显示其他内容。

少说，看代码，自己运行看效果。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>tab切换插件--tabSwitch</title>
</head>
<body>
<div class="parent">
<span class="aa" style="cursor: pointer;display: inline-block;width: 200px;border: 1px solid red;margin-right: 20px;">
tab1
</span>
<span class="aa" style="cursor: pointer;display: inline-block;width: 200px;border: 1px solid red;">
tab2
</span>
<div class="cc">
占据空间
</div>
<ul class="bb">
<li>tab1 内容</li>
<li>tab1 内容</li>
<li>tab1 内容</li>
</ul>
<ul class="bb">
<li>tab2 内容</li>
<li>tab2 内容</li>
<li>tab3 内容</li>
</ul>
</div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.tabSwitch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.bb').hide();
$('.parent').tabSwitch({tabName: '.aa',tabContent: 'ul',isInndex: '.cc',tabIs: false})
</script>
</body>
</html>