把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用。代码的具体注意事项已经写进注释了。用于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选项卡插件,页面多个选项卡统一调用的更多相关文章

  1. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  2. [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件

    jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...

  3. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  4. jquery自定义插件——以 选项卡插件为例

    一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...

  5. jQuery选项卡插件

    html结构 <ul id="tabs" class="tabs"> <li data-tab="users">Us ...

  6. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  7. 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  8. Tabs - 选项卡插件

        接上篇Tabs  - 选项卡插件  其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充          9)Flipping C ...

  9. [js插件开发教程]实现一个比较完整的开源级选项卡插件

    在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>>   [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...

随机推荐

  1. sublime中如何在浏览器中打开文件?

    SideBarEnhancements 侧边栏增强 SideBarEnhancements本是增强侧边栏的插件,这里将教大家如何用来做sublime text 3浏览器预览插件,并可自定义浏览器预览的 ...

  2. 转: 【Java并发编程】之十三:生产者—消费者模型(含代码)

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17249321 生产者消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一 ...

  3. 结对作业-基于GUI的四则运算

    一.需求分析 1.题目要求: 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI(可以是Windows PC 上的,也可以是Mac.Linux,web ...

  4. 201521123119《Java程序设计》第1周学习总结

    1.本周学习总结    1.Java语言是一种多用途的语言.并发的语言.以类为基础,面向对象的语言. 2.Java比C++更加方便,有辅助输入,编写速度大大加快. 3.Java根据应用领域不同,区分为 ...

  5. 201521123106 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  6. 201521123068 《java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  7. 详解go语言的array和slice 【一】

    本篇会详细讲解go语言中的array和slice,和平时开发中使用他样时需要注意的地方,以免入坑. Go语言中array是一组定长的同类型数据集合,并且是连续分配内存空间的. 声明一个数组 var a ...

  8. 深度学习(一)cross-entropy softmax overfitting regularization dropout

    一.Cross-entropy 我们理想情况是让神经网络学习更快 假设单模型: 只有一个输入,一个神经元,一个输出   简单模型: 输入为1时, 输出为0 神经网络的学习行为和人脑差的很多, 开始学习 ...

  9. c# 第一节课 一些简单的应用

    注册要钱 我没钱

  10. angularjs——路由篇

    路由 路由功能是由 routeProvider服务 和 ng-view 搭配实现,ng-view相当于提供了页面模板的挂载点,当切换URL进行跳转时,不同的页面模板会放在ng-view所在的位置; 然 ...