页面内容中的Jquery Mobile选项卡

Question

我在jQuery mobile中搜索插件以实现选项卡。选项卡必须位于页面的内容中。这是我有的......

<div data-role="page" id="nav">
  <div data-role="page" id="nav">
    <div data-role="header">
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">

        <div data-role="navbar" data-iconpos="top">

            <ul>
                <li>
                    <a href="#one" data-theme="" data-icon="" class="ui-btn-active ui-state-persist">
                        Button
                    </a>
                    </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
            </ul>
        </div>
        <div data-role="page" id="one" data-transition="slide">
            <div data-role="content" style="background-color:#ff0;">    
                <h1>One</h1>
            </div>
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <h3>
            Footer
        </h3>
    </div>
</div>

当我点击页面ID“一”时。它没有显示其各自的内容。 任何人都可以帮助我。

Answer 1

或者您可以使用我的tabview插件。基于JQM collapsbile集，您只需要用我的版本替换JQMs可折叠和可折叠集小部件。旧的可折叠设备将继续正常工作。将data-type="horizontal"添加到可折叠集时，它会变为...标签...

Demo here，回复Github。

我也喜欢其他解决方案。

Answer 2

我修改了jQuery.mobile-tabs以允许标签栏放在页面的任何位置。这是你的想法吗？