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>
至此，tab切换插件已经写完，请运行查看效果，此tab切换插件可以应用到网站建设中，减少代码开发工作。
tab切换插件开发的更多相关文章
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据
今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...
- 基于zepto的H5/移动端tab切换触摸拖动加载更多数据
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...
- JavaScript的Tab切换
在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- js用户管理中心tab切换界面模板
效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...
- CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
- ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息
一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...
随机推荐
- 上传图片转为base64格式预览并压缩图片（不兼容IE9以下浏览器，兼容移动端ios,android）
前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传 ...
- 一些CSS/JS小技巧
CSS部分 1.文本框不可点击 .inputDisabled{ background-color: #eee;cursor: not-allowed;} 2.禁止复制粘贴 onpaste=" ...
- 【Shell】使用Shell脚本发布项目
第一次写Shell脚本,没经验,是直接写呢,还是要走流程(￣▽￣)~* ---------------------------------------------------------------- ...
- T-SQL编程语句
书接上回 一起学习下SQL中的表连接 一般情况下咱们会使用鼠标去进行表连接操作,那针对于像我比较懒的并且眼盲的,不喜欢来回切换,咱们就用到了点T-SQL表连接语句 一般情况咱们从两个表中查出来相似的内 ...
- Spring Boot 配置文件 – 在坑中实践
摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 仓廪实而知礼节,衣食足而知荣辱 - 管仲 』 本文提纲 一.自动配置 二.自定义 ...
- TC SRM683 Div1 250
大意是有一排石子,每一堆有a[i]个,目标状态每一堆有b[i]个,每一步可以从一堆中取出一个石子转移到相邻的一个,其中1和n也算相邻也即环形.问最少步数. 比赛的时候写了个按照步数贪心的做法,FST了 ...
- css过渡模块和2d转换模块
今天,我们一起来研究一下css3中的过渡模块.2d转换模块和3d转换模块 一.过渡模块transition (一)过度模块的三要素: 1.必须要有属性发生变化 2.必须告诉系统哪个属性需要执行过渡效果 ...
- Linux Shell——bash shell 脚本简介
bash shell 脚本简介 shell 运行环境 如果你运行的是 Unix 或 Linux 系统,例如 Ubuntu,Red Hat,SUSE Linux,还有macOS,都是内置了 bash s ...
- bzoj2560 串珠子
Description 铭铭有n个十分漂亮的珠子和若干根颜色不同的绳子.现在铭铭想用绳子把所有的珠子连接成一个整体. 现在已知所有珠子互不相同,用整数1到n编号.对于第i个珠子和第j个珠子,可以选择不 ...
- java线程（一）
java线程基础 什么是线程? 这里引用百度百科的一句话:"线程,有时被称为轻量级进程(Lightweight Process,LWP),是程序执行流的最小单元.一个标准的线程由线程ID,当 ...