html结构

  1. <ul id="tabs" class="tabs">
  2. <li data-tab="users">Users</li>
  3. <li data-tab="groups">Groups</li>
  4. </ul>
  5. <div id="tabsContent" class="tabsContent">
  6. <div data-tab="users" class="tab-item"> item1 </div>
  7. <div data-tab="groups" class="tab-item"> item2 </div>
  8. </div>

css样式

  1. .tabs{
  2. width:500px;
  3. height:30px;
  4. background:#eee;
  5. }
  6. .tabs li{
  7. float:left;
  8. width:250px;
  9. font:18px/30px "Microsoft YaHei";
  10. color:#333;
  11. text-align: center;
  12. cursor: pointer;
  13. }
  14. .tabs li.active{
  15. background:#0aa;
  16. }
  17.  
  18. .tabsContent{
  19. width:498px;
  20. border:1px solid #888;
  21. }
  22. .tabsContent .tab-item{
  23. height:250px;
  24. width:100%;
  25. font-size: 45px;
  26. display: none;
  27. }
  28. .tabsContent .active{
  29. display: block;
  30. }

js脚本

  1. (function ($) {
  2.  
  3. /*
  4. * jquery tabs 插件
  5. */
  6. $.fn.tabs = function (control) {
  7.  
  8. var $element = $(this), // 切换的触点 li => tabs
  9. $control = $(control); // 切换的内容 tab-item => tabsContent
  10.  
  11. // 委托li的点击事件
  12. $element.delegate("li", "click", function () {
  13. // li 对应的 data-tab属性值
  14. var tabName = $(this).attr("data-tab");
  15.  
  16. $element.trigger("change.tab", tabName);
  17. });
  18.  
  19. // change.tab 第一步:改变li.active
  20. $element.bind("change.tab", function (e, tabName) {
  21. $element.find("[data-tab]").removeClass("active");
  22. $element.find("[data-tab="+ tabName +"]").addClass("active");
  23. });
  24.  
  25. // change.tab 第二步:改变tab-item.active
  26. $element.bind("change.tab", function (e, tabName) {
  27. $control.find("[data-tab]").removeClass("active");
  28. $control.find("[data-tab="+ tabName +"]").addClass("active");
  29. });
  30.  
  31. // 激活第一个选项卡
  32. $element.trigger("change.tab", $element.find("li:first").attr("data-tab"));
  33.  
  34. return this; // 返回链式调用
  35. };
  36. })(jQuery);
  37.  
  38. // 基本示例
  39. $("#tabs").tabs("#tabsContent");
  40.  
  41. /*
  42. * 应用扩展
  43. * 切换时将tabName写入hash
  44. * 当hashchange的时候触发tabs切换
  45. */
  46. // 当切换的时候,把tabName写入hash
  47. $("#tabs").bind("change.tab", function (e, tabName) {
  48. location.hash = tabName;
  49. });
  50.  
  51. // 目前除了 ie67 外都原生支持 hashchange 事件
  52. $(window).bind("hashchange", function () {
  53. var tabName = location.hash.slice(1);
  54. $("#tabs").trigger("change.tab", tabName);
  55. });

jQuery选项卡插件的更多相关文章

  1. 【特效】jquery选项卡插件,页面多个选项卡统一调用

    把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用.代码的具体注意事项已经写进注释了.用于js获取元素的class名称必须有,选项卡本身的样式,另再取一个名字来设置(本 ...

  2. jQuery选项卡插件、Tabs插件

    效果图: <!DOCTYPE html> <html> <head> <title></title> <script src=&quo ...

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

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

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

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

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

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

  6. JQ实现选项卡(jQuery原型插件扩展)

    下边分为两个版本,一种是点击切换选项(index.js),一种是滑过切换选项(index1.js) HTML文件: jq使用jquery-1.11.3.js版本 <!DOCTYPE html&g ...

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

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

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

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

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

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

随机推荐

  1. 用Ultra ISO制作启动U盘装系统

    用UltraISO制作启动U盘可以在没有光驱的情况下装系统. 现在有大容量U盘的越来越多,而且不装光驱的也越来越多. 那么用U盘装系统成为了可能和必须,不多废话了. 首先,需要准备的有: Ultra  ...

  2. Hot OS'15 summary

    My OS Ought to Know Me Better: In-app Behavioural Analytics as an OS Service   Earlence Fernandes, U ...

  3. 磁盘测试工具fio

    https://wiki.mikejung.biz/Benchmarking #blocksize This options determines the block size for the I/O ...

  4. AX函数,将EXCEL列号转为列名

    str GetExcelColName( int i_col) { int j; str ret; int v_div,v_mod; str tmp1,tmp2; int i_col_ascii; ; ...

  5. C# 发送邮件方法2

    一. 发送邮件程序:(使用System.Web.Mail下的类) "; //SMTP服务密码 strFrom = "jailu@163.com"; //发送方邮件地址 C ...

  6. Groovy轻松入门——通过与Java的比较,迅速掌握Groovy (更新于2008.10.18)

    摘自: http://www.blogjava.net/BlueSUN/archive/2007/03/10/103014.html Groovy轻松入门--通过与Java的比较,迅速掌握Groovy ...

  7. No deleted LINE chat messages recovered on iOS 9.1 after UFED extraction

    The evidence is iPhone 5s with iOS 9.1 and not jail breaked. I use UFED to do advanced logical extra ...

  8. 仿AS语法来写HTML5—第1章,显示一张图片

    最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇 第一篇 ...

  9. Mysql连接测试代码

    <?php $link=mysql_connect('localhost','root','htuidc'); if($link) echo "success"; ?>

  10. VS2008调试快捷键

    F5: 启动调试 Ctrl+F5: 开始执行(不调试) F10: 逐过程(不进入函数单步) F11: 逐语句(进入函数单步) Shift+F11跳出(实用) Ctrl+F10: 运行到光标处 F6: ...