【特效】jquery选项卡插件,页面多个选项卡统一调用
把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用。代码的具体注意事项已经写进注释了。用于js获取元素的class名称必须有,选项卡本身的样式,另再取一个名字来设置(本人不大喜欢用id,一般写js代码也用class名称来获取元素)。这样也在一定意义上实现了行为和样式的分离。
html:
<!--第一个选项卡-->
<div class="js_tab box1">
<h2 class="jsTab_title"><span>标题11</span><span>标题12</span><span>标题13</span></h2>
<div class="jsTab_con">
内容11
</div>
<div class="jsTab_con">
内容12
</div>
<div class="jsTab_con">
内容13
</div>
</div>
<!--第二个选项卡-->
<div class="js_tab box2">
<h2 class="jsTab_title"><span>标题21</span><span>标题22</span><span>标题23</span></h2>
<div class="jsTab_con">
内容21
</div>
<div class="jsTab_con">
内容22
</div>
<div class="jsTab_con">
内容23
</div>
</div>
css:
/*必须设置的*/
.jsTab_con{ display:none;}
.jsTab_title span{ cursor:pointer;}
.jsTab_title .jsTab_this{ background:#096;}
/*选项卡的样式*/
.js_tab{ width:900px; margin:30px auto 0; border:1px solid #0C9;}
.js_tab h2{ font-weight:normal; height:40px; line-height:40px; text-align:center;}
.js_tab h2 span{ display:inline-block; width:270px; margin:0 10px; background:#0CF; color:#fff;}
.jsTab_con{ width:848px; height:200px; border:1px solid #09C; margin:0 auto 20px;}
js:
$(document).ready(function(){
//使选项卡的第一项显示,必须加入
var tabs=$(".js_tab");
tabs.each(function(){
$(this).find(".jsTab_title span").first().addClass("jsTab_this");
$(this).find(".jsTab_con").first().show();
});
//调用,不能用本身的js_tab调用,需另起一个class或id
$(".box1").js_tab();
$(".box2").js_tab();
});
//选项卡插件
;(function($){
$.fn.extend({
"js_tab":function(){
$(this).find(".jsTab_title span").each(function(index){
$(this).click(function(){
$(this).siblings("span").removeClass("jsTab_this");
$(this).addClass("jsTab_this");
var tab_c=$(this).parents(".js_tab").find(".jsTab_con");
tab_c.hide();
tab_c.eq(index).show();
});
return $(this);
});
}
});
})(jQuery);
预览效果:http://www.gbtags.com/gb/rtreplayerpreview-standalone/2840.htm
源码下载:http://pan.baidu.com/s/1o8gVTs2
【特效】jquery选项卡插件,页面多个选项卡统一调用的更多相关文章
- 基于jQuery简单实用的Tabs选项卡插件
jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...
- [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件
jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- jquery自定义插件——以 选项卡插件为例
一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...
- jQuery选项卡插件
html结构 <ul id="tabs" class="tabs"> <li data-tab="users">Us ...
- 使用jQuery.extend创建一个简单的选项卡插件
选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...
- 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- Tabs - 选项卡插件
接上篇Tabs - 选项卡插件 其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充 9)Flipping C ...
- [js插件开发教程]实现一个比较完整的开源级选项卡插件
在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>> [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...
随机推荐
- springmvc注解
简介: handler method 参数绑定常用的注解,我们根据他们处理的Request的不同内容部分分为四类:(主要讲解常用类型) A.处理requet uri 部分(这里指uri templat ...
- [2017BUAA软工助教]收集个人信息
如题 我们要收集三个东西 1.学号 2.Github地址 ① 3.博客园博客地址 ② 请各位同学自行创建,并按照如下的格式评论在这篇博客下 "14061195+https://github. ...
- 201521123059 《Java程序设计》第四周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 参考资料: 百度脑图 XMind 1.2 使用常规方法总结其他上课内容. 1.多态性就是相同的形态,不同的行为(不同的定义).多态就 ...
- 201521123050 《Java程序设计》第4周学习总结
1. 本周学习总结 2. 书面作业 1.注释的应用 1.1使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在 ...
- Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...
- Hibernate第十一篇【配置C3P0数据库连接池、线程Session】
Hibernate连接池 Hibernate自带了连接池,但是呢,该连接池比较简单..而Hibernate又对C3P0这个连接池支持-因此我们来更换Hibernate连接池为C3P0 查看Hibern ...
- Three.js与webVR
WebVR如此近 - three.js的WebVR示例程序解析 关于WebVR 最近VR的发展十分吸引人们的眼球,很多同学应该也心痒痒的想体验VR设备,然而现在的专业硬件价格还比较高,入手一个估计就要 ...
- Markdown编辑器 简单使用
[TOC] 一号标题 二号标题 三号标题 1 列表 2 列表 3 列表 引用 引用就是实在前面加上> 分割线 分割线就是三个* 目录 目录是[TOC],加在一个文章的最前面 粗体 和斜体 一个之 ...
- angularjs之ui-bootstrap的Datepicker Popup实现双日期选择控件
最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性 ...
- S3C2440 时钟设置分析(FCLK, HCLK, PCLK)
时钟对于一个系统的重要性不言而喻,时钟决定了系统发送数据的快慢,高性能的芯片往往能支持更快速度的时钟,从而提供更好的体验. S3C2440的输入时钟频率是12MHZ,对于这款芯片,显然速度是不够的,所 ...