自定义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 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
AngularJs 常用的过滤器
May 15 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
Antd下拉选择,自动匹配功能的实现
Oct 24 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数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
javascript中undefined的本质解析
2019/07/31 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
python3+PyQt5实现柱状图
2018/04/24 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
小学生元旦广播稿
2014/02/21 职场文书
公司晚会主持词
2014/03/22 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
销售员态度差检讨书
2014/10/26 职场文书
死亡赔偿协议书
2015/01/28 职场文书
2016银行求职自荐信
2016/01/28 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js