页面内容中的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"到可折叠集时,它会变为...标签...

在这里演示,Repo on Github.

我也喜欢其他解决方案.