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, ...
随机推荐
- spring+mybatis事务不起作用的原因
一.场景再现 @Override @Transactional public void updateById(String userId,String username) throws Excepti ...
- Java与面向对象之随感（1）
大一下学期上完了c++课程,当时自我感觉很良好,认为对面向对象编程已经是身经百战了,但是上了院里HuangYu老师的Java课之后,才发现自己对于面向对象的编程风格的理解只在皮毛,着实惭愧不已. 假设 ...
- CSS3－渐变背景色
线性渐变背景色: <style> .linear { width:130px; height:130px; border:2px solid black; padding: 10px; b ...
- CSS新内容
margin 外边距 * margin 属性值最多有4个 * ① 只写一个值:四个方向的margin ...
- Spring事务管理的实现方式之编程式事务与声明式事务详解
原创说明:本博文为原创作品,绝非他处转载,转载请联系博主 1.上篇文章讲解了Spring事务的传播级别与隔离级别,以及分布式事务的简单配置,点击回看上篇文章 2.编程式事务:编码方式实现事务管理(代码 ...
- html基础认识，高手别看
HTML5是一种用于在万维网上构建和呈现内容的符号言语.它是HTML规范的第五和当时版别.它是由万维网联盟(W3C)在十月发布的2014 [ 2 ] [ 4 ]和最新的多媒体支持进步言语,一起坚持它简 ...
- Excception and Error
exception and error都是继承throwable类; Exception就是程序中出现的异常,程序会去捕获: 但是error是比较严重的错误,程序是不会去捕获的: erroe:一般都是 ...
- 转-Tomcat 8 安装和配置、优化
https://github.com/judasn/Linux-Tutorial/blob/master/Tomcat-Install-And-Settings.md Tomcat 8 安装 Tomc ...
- 「七天自制PHP框架」第二天：模型与数据库
往期回顾:「七天自制PHP框架」第一天:路由与控制器,点击此处 什么是模型? 我们的WEB系统一定会和各种数据打交道,实际开发过程中,往往一个类对应了关系数据库的一张或多张数据表,这里就会出现两个问题 ...
- Android开源项目库汇总
最近做了一个Android开源项目库汇总,里面集合了OpenDigg 上的优质的Android开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. 抽 ...