## 1.3\. 什么是Tab？
### 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代碼寫的太隨意，沒有注意控制組件自身管控范圍
**_不嚴謹是寫代碼的大忌_**
