学习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学后面的，不过解决这个问题，后面的就显得更加容易了，赶忙尝试吧！