如何使用Bootstrap选项卡和jQuery Mobile页面?

时间:2012-10-18 13:32:25

标签: jquery-mobile twitter-bootstrap

我正在开发一个使用Bootstrap for desktop和jQuery Mobile for mobile设备的网站。我遇到了Bootstrap中的选项卡与jQuery Mobile中的页面的HTML结构问题。基本上,如果我使用Bootstrap的HTML(如下所示),jQuery Mobile页面最终会被嵌套。当jQuery Mobile data-role="page"标签嵌套时,它似乎不起作用。有什么想法吗?

<div class="tabbable" data-role="page"> <!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
         <div class="tab-pane active" id="tab1" data-role="page">
             <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2" data-role="page">
        <p>Howdy, I'm in Section 2.</p>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

我用来解决这个问题的解决方案是一个名为subpage的jquery移动插件。

我将嵌套页面更改为子页面,但它确实有效。