學習Semantic UI之Tabs

        老實說，做爲一個入行沒多久的程序員，一直沒有勇氣寫博文，其實成長的過程就是不斷的學習，就當是記筆記，從這一篇開始吧。若是有幸被衆多同行讀到，大可盡情提議討論，不過對於文筆很差這個問題，還請儘可能不要吐槽拍磚。

        在知曉前端技術一開始，也學過幾招jQuery UI，也知道Bootstrap，可爲何選擇Semantic UI，重點在於我的比較偏好它的語義化這一特色。無奈中文文檔匱乏（此時Sematic UI中文網 也沒有翻譯完畢，除此以外根本沒找着別的），那只有靠本身這下三爛的英文水平配合詞典摸索了。

        網站十分簡潔，一下就找到了Menu（真是太機智了）。

        英文大多不認識，就按目錄看唄，總算在Overview看到了代碼，前幾個是簡單的Menu的示例，後面找到一個Tabs

<div class="ui pointing secondary demo menu"><!-- demo 是自定義的類選擇器名稱-->
  <a class="active red item" data-tab="first">First</a>
  <a class="blue item" data-tab="second">Second</a>
  <a class="green item" data-tab="third">Third</a>
</div>
<div class="ui active tab segment" data-tab="first">First</div>
<div class="ui tab segment" data-tab="second">Second</div>
<div class="ui tab segment" data-tab="third">Third</div>

        很是語義化的代碼，可本身寫一遍，瀏覽器始終報這個錯誤！

    Tab: The state library has not been initialized

    納悶了，最終Google了一下找到了答案。

        You need to include another not mentioned js-file: jquery.address.js
        (https://github.com/asual/jquery-address)

        就是說，須要這樣引入必要的css、js，這裏的Tabs特效須要jquery.address

<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/semantic.js"></script>
<script src="js/jquery.address.js"></script>
<link rel="stylesheet" type="text/css" href="css/semantic.css">
<script type="text/javascript">
    //demo 是自定義的類選擇器名稱
    $(function (){
        //jQuery UI的Tab也是這樣，可能也許大概說不許也依賴jquery.address
        $('.demo.menu .item').tab();
    })
</script>

        這樣看來，第一步老是很差邁出的，雖然大可跳過這個Tab學後面的，不過解決這個問題，後面的就顯得更加容易了，趕忙嘗試吧！