自定义jQuery选项卡插件实例


Posted in Javascript onMarch 27, 2013
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery自定义选项卡插件</title>
<style>
body, ul { padding:0; margin:0; }
li { list-style:none; }
#tabs { zoom:1; }
#tab:after { content:""; display:block; clear:both; }
#tabs li { float:left; padding:10px; color:#FF8900; background:#FFF; cursor:pointer; }
#tabs .active { background:#FF8900; color:#FFF; }
#tabContent { background:#FF8900; color:#FFF; padding:10px; clear:both; }
#tabContent div { display:none; }
#tabContent div.active { display:block; }
</style>
</head>
<body>
<ul id="tabs">
  <li data-tab="users">Users</li>
  <li data-tab="groups">Groups</li>
</ul>
<div id="tabContent">
  <div data-tab="users">Users Content</div>
  <div data-tab="groups">Groups Content</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
jQuery.fn.tabs = function (control) {
    var element = $(this);
    var control = $(control);
    element.delegate('li', 'click', function () {
        // 遍历选项卡名称
        var tabName = $(this).attr('data-tab');
        // 点击选项卡时触发自定义事件
        element.trigger('change.tabs', tabName);
    });
    // 绑定到自定义事件
    element.bind('change.tabs', function (ev, tabName) {
        element.find('li').removeClass('active');
        element.find('>[data-tab=' + tabName + ']').addClass('active');
    });
    element.bind('change.tabs', function (ev, tabName) {
        control.find('>[data-tab]').removeClass('active');
        control.find('>[data-tab=' + tabName + ']').addClass('active');
    });
    // 激活第 1 个选项卡
    var firstName = element.find('li:first').attr('data-tab');
    element.trigger('change.tabs', firstName);
    return this;
};
jQuery(function ($) {
    $('#tabs').tabs('#tabContent');
    $('#tab').bind('change.tabs', function (ev, tabName) {
        window.loaction.hash = tabName;
    });
    $(window).bind('hashchange', function () {
        var tabName = window.location.hash.slice(1);
        $('#tabs').trigger('change.tabs', tabName);
    });
});
</script>
</body>
</html>
Javascript 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
javascript 自动转到命名锚记
Jan 10 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
js数组的操作详解
Mar 27 #Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 #Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 #Javascript
JS删除数组元素的函数介绍
Mar 27 #Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 #Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 #Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 #Javascript
You might like
php常用ODBC函数集(详细)
2013/06/24 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python的ORM框架SQLObject入门实例
2014/04/28 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
Python之字典对象的几种创建方法
2020/09/30 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
什么是方法的重载
2013/06/24 面试题
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
小石潭记导游词
2015/02/03 职场文书
加入学生会自荐书
2015/03/05 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python