本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。 [署名 4.0 国际 (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/deed.zh) 本文作者: 苏洋 创建时间: 2012年11月29日 统计字数: 5864字 阅读时间: 12分钟阅读 本文链接: https://soulteary.com/2012/11/29/jquery-diary-tab.html ----- # jQuery 笔记：选项卡 高手莫入，浅显例子而已。最近在更换项目中的javascript库，觉得如果能把实践的过程记录下来，应该可以帮助到一些对javascript感兴趣的前端初学者，@胖子哥，是吧。 ![tab-switch](https://attachment.soulteary.com/2012/11/29/tab-switch.png "tab-switch") 我们常常看到网站上有一些可以切换的选项卡，那么这些选项卡是怎么制作的呢。 首先看一个简单的栗子-v- http://thecdn.sinaapp.com/page/demo/jq-tab-switch/ 那么这样的效果是怎么实现的呢。 我们来一步一步分解任务，首先在纸上把你的需求草图画一下。我鼠绘比较丑，PS随便拖几个色块，如图所示。 ![tab-struct](https://attachment.soulteary.com/2012/11/29/tab-struct.png "tab-struct") 首先这个选项卡是分两个部分的，上面一条比较窄的是导航按钮，下面比较大面积的是展示内容。导航按钮中又包含了一些深红色的按钮。 接着想一下用户和这个选项卡的交互，比如鼠标划过会切换内容，或者点击会切换内容。再往深一点想，内容是怎么切换。 比如你要使用Ajax的XHR来填充内容，还是使用已经存在的数据，比如CALLBACK回来的JSON来动态填充，还是简单的切换隐藏页面内已经存在的内容。切换内容你又要使用神马形式的特效，是淡入淡出，还是左飞出，还是对角线移动... 好了，把心思收回来，先从简单的开始。先用HTML把刚刚的想法的草图实现一下。 关于结构，大家仁者见仁，我觉得下面的结构用来展示还是比较不错的。 ```html JQUERY TAB SWITCH
``` 结构展示: http://thecdn.sinaapp.com/page/demo/jq-tab-switch/step-1.html 现在貌似很丑陋，没关系，你可以用CSS来美化一下它。当然，作为例子，我就不细致的去搞它了。 使用下面的CSS就能看出一个大概的样子，足够下一步写JS使用的样式。 ```css *,html,body,div,ul,li,h3,p{ margin: 0; padding: 0; } body{ background-color:#caefff; } div,ul,li,h3,p{ float: left; display: block; } div#tab-warp{ width: 400px; height: 200px; top: 50%; left: 50%; position: absolute; margin-left: -200px; margin-top: -200px; } div#tab-warp ul.tab-label, div#tab-warp ul.tab-panel{ width:100%; } div#tab-warp ul.tab-label{ height: 30px; border-bottom: none; } div#tab-warp ul.tab-panel{ background-color: #a3cadc; height: 150px; border: 2px solid #fff; } ul.tab-label li.tab-label-item{ background-color: #555; width: 50px; height: 24px; line-height: 24px; font-weight: normal; margin-top: 5px; border: 1px solid #EEE; color: white; text-align: center; cursor: pointer; } ul.tab-label li.tab-label-item.hover{ background-color: #64AEFF; width: 60px; height: 29px; line-height: 29px; font-weight: bold; margin-top: 0; } ul.tab-panel li.tab-panel-item{ width: 100%; height: 100%; color: #434343; display: none; } ul.tab-panel li.tab-panel-item p{ margin:10px; } ul.tab-panel li.tab-panel-item.hover{ display: block; } ``` > 样式展示: > http://thecdn.sinaapp.com/page/demo/jq-tab-switch/step-2.html 如果上一步添加样式，让你觉得这个选项卡有点丑，那么你可以继续在上一步精雕细琢，完成你要的选项卡样式。 如果你完成了，或者你想看如何把交互内容添加到选项卡上，那么我们继续。 在页面中引入jQuery库后我们开始写可以让选项卡活起来的代码，接下来的说明都会写到注释中。 ```js $(document).ready( //如果网络速度不佳，页面结构没有下载完毕 //这时脚本先于文档结构解析完毕的时候执行或许会出错 //所以我们使用这个方法把主要的逻辑代码包裹起来 //对应HTML文档中的选项卡的上部的导航标签 //获取这货的所有子元素，然后为他们绑定一个事件:鼠标点击 $('div#tab-warp>ul.tab-label').children().bind("click", function(e) { //当鼠标点击后 //先分别获取选项卡两个部分的子元素 var nav = $('div#tab-warp>ul.tab-label').children(); var pal = $('div#tab-warp>ul.tab-panel').children(); //判断他们的子元素数量是否一致 var navc = nav.length; var palc = nav.length; //如果不一致，那么没有办法正常切换，所以不继续执行 if (navc != palc) { return; } //去掉所有的按钮的class中的'hover' for (var i = 0; i < navc; i++) { $(nav[i]).removeClass('hover'); } //给当前点击的元素的class中添加'hover' $(this).addClass('hover'); var o = 0; //定义一个变量获取当前具有焦点的元素的序号(index) //然后获取当前的具有'hover'的元素的序号 for (var i = 0; i < navc; i++) { //如果某个元素被选中，那么这个元素的class包含'hover' if ($(nav[i]).hasClass('hover')) { //注意这里因为一一对应,下面注释有说 o = i; } } //因为上边的选项卡按钮和下面的内容是一一对应的。 //所以内容和选项卡进行同样的操作 //去掉所有内容class中的'hover' pal.removeClass('hover'); //接着给和按钮序号一样的家伙添加一个'hover'属性 $(pal[o]).addClass('hover'); //最后终止事件冒泡 e.stopPropagation(); } ) ); ``` > 交互展示: > http://thecdn.sinaapp.com/page/demo/jq-tab-switch/step-3.html 在这一步，你可以给你的选项卡切换添加不同的特效或者根据不同的事件触发，比如鼠标移动到元素上，或者按下了某个键盘按键等。 那么这样写法固定的脚本意义大嘛，个人感觉不大，既然这个东西有共性，那么我们应该把这个家伙抽象出来，变成一个公共的东西。 jQuery提供一种叫做插件的形式来组织这样可以公共使用的内容。 在此之前，我们需要把插件中效率不是太高的方法，重写一下。 ```js $(document).ready( //首先是绑定元素替换为绑定元素的父级，统称事件代理， //这个事件中绑定导航按钮的父元素可以有效缩减3次绑定 $('div#tab-warp>ul.tab-label').parent().bind('click', //把点击事件传到e这个参数中 //让函数中可以引用 function(e) { //对e.target元素进行处理 //触发的元素得到了鼠标的眷顾哦 //先来判断下是不是我们要的按钮元素 //我们要的按钮元素的class具备tab-label-item //所以没有这个class属性的元素，就不和他玩了 if (!$(e.target).hasClass('tab-label-item')) { return; } var nav = $('div#tab-warp>ul.tab-label').children(); var pal = $('div#tab-warp>ul.tab-panel').children(); var navc = nav.length; var palc = nav.length; if (navc != palc) { return; } //把之前的循环也用已经缓存了的对象来操作吧 nav.removeClass('hover'); //之前的this到这里要修改为假定的目标元素 $(e.target).addClass('hover'); var o = 0; for (var i = 0; i < navc; i++) { if ($(nav[i]).hasClass('hover')) { o = i; } } pal.removeClass('hover'); $(pal[o]).addClass('hover'); e.stopPropagation(); } ) ); ``` > 简单优化: > http://thecdn.sinaapp.com/page/demo/jq-tab-switch/step-4.html 假定上面的javascript优化的差不多了，我们就可以制作插件了。 ```js //为了保护世界的和平 //为了防止世界被破坏 //先把内容扔匿名函数中 ; (function($) { //用覆盖的方式写插件 $.fn.extend({ //插件就叫switchTab吧 //传入一个对象类型的参数叫做params //之前的固定的字符串修改为参数 // 'div#tab-warp>ul.tab-label' ==> params.tabNav // 'div#tab-warp>ul.tab-panel' ==> params.tabPan // 'tab-label-item' ==> params.tabNavBtn // 'hover' ==> params.hover // 'click' ==> params.event //接着我们调用的时候传入的参数大概就是这样 //params ==> { // tabNav:'div#tab-warp>ul.tab-label', // tabPan:'div#tab-warp>ul.tab-panel', // tabNavBtn:'tab-label-item', // hover:'hover', // event:'click' // } "switchTab": function(params) { //设置参数默认值 params = $.extend({ tabNav: 'div#tab-warp>ul.tab-label', //导航按钮的容器 tabPan: 'div#tab-warp>ul.tab-panel', //对应的内容的容器 tabNavBtn: 'tab-label-item', //导航按钮的元素 hover: 'hover', //获得焦点后要添加的css类名 event: 'click' //要绑定的事件类型 }, params); //这里开始之前的函数内容 $(document).ready( $(params.tabNav).parent().bind(params.event, function(e) { if (!$(e.target).hasClass(params.tabNavBtn)) { return; } var nav = $(params.tabNav).children(); var pal = $(params.tabPan).children(); var navc = nav.length; var palc = nav.length; if (navc != palc) { return; } nav.removeClass(params.hover); $(e.target).addClass(params.hover); var o = 0; for (var i = 0; i < navc; i++) { if ($(nav[i]).hasClass(params.hover)) { o = i; } } pal.removeClass(params.hover); $(pal[o]).addClass(params.hover); e.stopPropagation(); } ) ); //这里结束之前函数内容 return this; //返回插件本身 //让插件可以链式操作 } }); })(jQuery, 'SOULTEARY.COM'); //第一个参数是传入我们要选项卡化的元素 //最后就是插件化的意义 //简单的传入参数实现调用 $('#tab-warp').switchTab({ tabNav: 'div#tab-warp>ul.tab-label', tabPan: 'div#tab-warp>ul.tab-panel', tabNavBtn: 'tab-label-item', hover: 'hover', event: 'click' }); ``` > 插件化: > http://thecdn.sinaapp.com/page/demo/jq-tab-switch/step-5.html 最后抽离所有的内联元素，让页面略微规范。 > 最后结果: > http://thecdn.sinaapp.com/page/demo/jq-tab-switch/index.html 至此这篇肤浅的文章就结束了，希望路过的前端爱好者可以从这里获取一点点的知识。 如果有任何的疑问，或者勘误，欢迎留言斧正。