【Jquery mobile】tab功能的實現

目前有兩種簡單的實現方式：

一，jquery mobile 的實現

jquery的tab的實現是通過在各自頁面的footer添加tab項實現的，如下：

實現代碼如下：

 

<div data-role="footer" data-id="foo1" data-position="fixed"><div data-role="navbar"><ul><li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li><li><a href="footer-persist-b.html">Albums</a></li><li><a href="footer-persist-c.html">Emails</a></li></ul></div><!-- /navbar --></div>

二，還有一個開源js：

https://github.com/groovetrain/jQuery.mobile-Tabs

有例子，說的也很明白：

<div data-role="page" id="page-title">    <div data-role="header">        <h1><%= @page_title %></h1>        <div data-role="tabs">            <ul>                <li><a href="#tab-1" class="">Tab 1</a></li>                <li><a href="#tab-2" class="">Tab 2</a></li>            </ul>        </div>    </div>    <div data-role="content">        <ul id="tab-1">            <li>First thing</li>            <li>Second Thing</li>        </ul>        <div id="tab-2">            <h2>Here is the second tab</h2>        </div>    </div></div>