JQuery製作Tabs元件

測試環境
JQuery版本	jquery-1.11.1.min.js(jquery-2.1.1.min.js也可使用), jquery-ui-1.10.4.custom.min.js
測試瀏覽器	Chrome36.0,Firefox31.0

Tabs是比較常見的JQuery功能，而且JQuery官方的UI中也有提供此功能給大家免費下載
(P.S. 那你還要介紹個屁阿~)
是der~那為什麼還要再多做介紹呢?
因為這樣才可以讓像我一樣無聊喜歡打破砂鍋問到底的朋友們有一個學習跟了解
Tabs元件製作方式的機會，這樣以後在應用上才會更加廣泛
而且我想信大家打開官方的UI文件檔案，應該是跟我一樣「它認識我，我不認識它」的心情吧

這種寫法是我自己無聊的時候想出來的，所以跟我目前的程度一樣粗淺希望大家多海涵~謝謝
如果大家有興趣多看看別人寫的也可以參考男丁格爾所寫的Tabs元件唷~!

接下來就是開始進入主題的時候了
首先我們先建立一個Tabs的HTML Code(請參考下面的HTML Code)

<div id="tabs">
  <ul>
    <li id="tab1"><a href="#tabDiv1">tab1-</a></li>
    <li id="tab2"><a href="#tabDiv2">tab2-</a></li>
    <li id="tab3"><a href="#tabDiv3">tab3-</a></li>
  </ul>
  <div id="tabDiv1" class="tabsty">tabDiv1</div>
  <div id="tabDiv2" class="tabsty">tabDiv2</div>
  <div id="tabDiv3" class="tabsty">tabDiv3</div>
</div>

我們先建立一個Div叫做#tabs，這個Div裡面呢，包含了一個ul標籤在ul標籤下還有三個li標籤，
分別是#tab1、#tab2、#tab3，在各個li中還分別包含了a標籤，
並分別將href屬性設定為#tabDiv1、#tabDiv2、#tabDiv3，
另外還有三個Div分別它們的ID分別是#tabDiv1、#tabDiv2、#tabDiv3

注意:

a標籤中的href屬性記得要分別對應三個Div的ID屬性，
這是JQuery做判斷要用的千萬要注意，
在使用此JQuery Code的時候，架構的部分一定要跟下面介紹的Code一樣唷，
不然就要自己再去調整JQuery的Code了
另外要注意的小地方是，href在設定時要加上「#」符號，而在設定Div的ID時則不需要加上「#」符號唷~!

接下來就到了設定CSS樣式的時候了，這部分的話請參考下面Code中的註解說明，就不再贅述了~

body{
  /*將網頁畫面主體的外距設為0象素，內距則是上下左右各5象素*/
  margin:0px;
  padding:5px;  
}
#tabs ul{
  /*清除ul的項目符號*/
  list-style:none;
  /*清除左右浮動的區塊*/
  clear:both;
  /*將內距、外距設定為0象素*/
  margin:0px;
  padding:0px;
}
#tabs{
  /*將tabs區塊的寬度設定為100%讓寬度與上層元素一樣寬*/
  width:100%;
  /*設定邊框*/
  border:1px solid #000;
}
li{
  border:1px solid #000;
  width:100px;
  /*將li設定為區塊*/
  display:block;
  padding:10px;
  /*li內的文字置中*/
  text-align:center;
  /*向左邊浮動*/
  float:left;
}
li:hover{
  /*滑鼠滑過li時更換li背景顏色*/
  background:#FF0;
}
.tabsty{
  clear:both;
  border:1px solid #000;
  height:50px;
}

如果沒有問題的話接下來出現的畫面應該是像下圖這樣

這樣我們的Tabs就已經開始有一個雛形出現了，緊接著就讓我們開始進行JQuery的部分吧~!GO
首先我們要先設定一個名為tabs的function，並且這個function在呼叫時需要可以帶入參數key
這個key代表的是什麼呢? 它代表的是要變成Tabs元件Div區塊的id(在本範例就是#tabs)

function tabs(key){
  //遍歷元件下的li標籤
  $(key +" li").each(function(i, ele){
    //將元件下的Div隱藏
    $(key +" div").hide();
    //將元件下的第一個Div顯示
    $(key +" ul+div").show();
    //取得li的id
    var _text = $(ele),
        _id = _text.attr("id") || "";
    //當li被點擊的時候
    $("#"+_id).click(function(){
      //取得a標籤的href屬性值
      var _href=$("#"+_id+" a").attr("href");
      //遍歷元件下的Div標籤
      $(key +" div").each(function(i, ele){
        //獲取元件下Div的ID屬性值
        var _text2 = $(ele),
            _id2 = _text2.attr("id") || "";
        //判斷a標籤的href屬性值是否等於Div標籤的ID屬性值
        if(_href=="#"+_id2){
          //條件成立的話顯示該DIV區塊
          $("#"+_id2).show();
        }else{
          //否則隱藏該DIV區塊
          $("#"+_id2).hide();
        }
      });
    });  
  });
}

完成Tabs的function後，接下來要怎麼樣呼叫呢? 請參考下面的Code呼叫

tabs("#tabs");

是的不要懷疑當完成Tabs的function後呼叫就是這麼方便，
給他要變成Tab的Div區塊ID屬性值就對了

Dome

See the Pen Tabs標籤元件 by jen (@jen_huang) on CodePen.

非常感謝大家今天的收看，今天的Coding就到這邊節目即將要結束了，若有任何的指教歡迎留言，
就讓我們期待下次的再次相逢 謝謝~再會!!