企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
## 1.3\. 什么是Tab? ![](https://box.kancloud.cn/2016-05-02_57272f60c21ec.gif) ### 1.3.1\. 看一下小灰灰的tab v1 [v1](examples/jquery_plugin/first/jQuery.tab.html) ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; list-style: none; } #tab { width: 600px; height: 300px; border: 1px solid #ccc; } #tab > div{ display: none; } #tab_btn { height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; } #tab_btn li { float: left; width: 200px; text-align: center;; } #tab_btn li.on{ background: #ccc; } </style> </head> <body> <div id="tab"> <ul id="tab_btn"> <li class="on">选项卡一</li> <li>选项卡二</li> <li>选项卡三</li> </ul> <div style="display:block">我是第一个内容</div> <div>我是第二个内容</div> <div>我是第三个内容</div> </div> <script src="../lib/jquery-1.10.2.min.js"></script> <script> $('#tab_btn li').on('mouseover', function (){ $('#tab_btn li').removeClass('on'); $(this).addClass('on'); $('#tab div').hide(); $('#tab div').eq($(this).index()).show(); }) </script> </body> </html> ``` ### 1.3.2\. 它有几个明显问题 * 样式与js代码没有和html分离 * tab功能实现里,但无法复用,因为他用的是id方式 * tab的骨架html模板也不合理 ### 1.3.3\. 狮子的故事 曾经有一个小伙伴,写下来这样的代码 ``` <ul id="tab_btn"> <li class="lion">选项卡一</li> <li>选项卡二</li> <li>选项卡三</li> </ul> ``` 然后我在读css代码的时候,发现 ``` .lion { ... } ``` 我看了很久,lion是狮子的意思,那这里呢? 后来才明白,原来是li on的意思,也就是选中的tab的状态是on。 命名是非常容易闹笑话的,其实,这里用active更合适 ### 1.3.4\. 看一下小灰灰的tab v2 [v2](examples/jquery_plugin/second/jQuery.tab.html) 提取css和js的部分不是本章重点,下面比较一下重构后的tab骨架结构 之前的tab骨架 ``` <div id="tab"> <ul id="tab_btn"> <li class="on">选项卡一</li> <li>选项卡二</li> <li>选项卡三</li> </ul> <div style="display:block">我是第一个内容</div> <div>我是第二个内容</div> <div>我是第三个内容</div> </div> ``` 重构后的代码 ``` <div id="tab"> <div class="tab_header"> <ul> <li class="active">选项卡一</li> <li>选项卡二</li> <li>选项卡三</li> </ul> </div> <div class="tab_content"> <div class='tab_content_item' style="display:block"> 我是第一个内容 </div> <div class='tab_content_item'> 我是第二个内容 </div> <div class='tab_content_item'> 我是第三个内容 </div> </div> </div> ``` 这样的代码结构是不是更为清晰呢? ### 1.3.5\. 重构行内样式 还有点小瑕疵,下面代码用了行内样式 ``` <div class='tab_content_item' style="display:block"> 我是第一个内容 </div> ``` 修改如下 ``` // html <div class='tab_content_item active'> 我是第一个内容 </div> // css .tab_content .active{ display:block; } ``` 把行内样式抽象成状态,继而让代码更具可读性 ### 1.3.6\. v2的js 结构改了,js也一定做了修改,tab.js具体内容如下: ``` ;$(function(){ $('.tab_header li').on('mouseover', function (){ $('.tab_header li').removeClass('active'); $(this).addClass('active'); $('.tab_content div').hide(); $('.tab_content div').eq($(this).index()).show(); }) }); ``` ### 1.3.7\. 点评 v2的js只是根据tab的骨架接口修改而进行了简单修改,主要是dom selector的修改 没有什么特别值得说明的。 ### 1.3.8\. 让我们看看一个页面多个tab,它如何? 详见 jQuery.tab_more.html 出现的问题是在第二个tab上滑动的时候,更新的是第一个tab content,这是为什么呢? 答:js代码写的太随意,没有注意控制组件自身管控范围 **_不严谨是写代码的大忌_**