changePage 选项卡不起作用后答案

【问题标题】：After changePage tabs is not workingchangePage 选项卡不起作用后
【发布时间】：2014-05-14 16:39:20
【问题描述】：

我是 jquery mobile 的新手。我有两个页面，分别是 page1.html 和 page2.html。 page1 将导航到 page2，并且 page2 内部有一个导航栏。

这是我的代码 page1.html 导航到 page2

  $.mobile.pageContainer.pagecontainer("change", "page2.html", {
    allowSamePageTransition: true,
    transition: 'none',
    showLoadMsg: false,
    reloadPage: false,
    changeHash: true

})

page2.html

  <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>collapsible demo</title>
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>jQuery Mobile Example</h1>
        </div>
        <div data-role="content" class="ui-content">
            <div data-role="tabs">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#fragment-1">One</a></li>
                        <li><a href="#fragment-2">Two</a></li>
                        <li><a href="#fragment-3">Three</a></li>
                    </ul>
                </div>
                <div id="fragment-1">
                    <p>This is the content of the tab 'One', with the id fragment-1.</p>
                </div>
                <div id="fragment-2">
                    <p>This is the content of the tab 'Two', with the id fragment-2.</p>
                </div>
                <div id="fragment-3">
                    <p>This is the content of the tab 'Three', with the id fragment-3.</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

如果我单独运行 page2，它可以工作。但是，一旦我将页面从 page1 更改为 page2，问题就来了。请不要回复我添加rel="external" 一旦我使用 rel="external"

可能会导致白屏问题

【问题讨论】：

标签： jquery-mobile tabs navbar

【解决方案1】：

这是一个已知的 jQuery Mobile 1.4 错误，它将在 jQuery Mobile 1.4.3 版本中修复。

在此处了解更多信息：https://github.com/jquery/jquery-mobile/issues/7169

您还可以在此处找到解决方法。

还有另一种解决方案，它要求您动态创建选项卡小部件，如下所示：

$(document).on("pagecreate", "#p2", function () {
    var tabs = '<div data-role="tabs" id="tbPaymentMethod"><div data-role="navbar"><ul><li><a href="#tabCash">Tab 1</a></li><li><a href="#tabCcard">Tab 2</a></li><li><a href="#tabCheck">Tab 3</a></li></ul></div><div id="tabCash"><p>This is the content of the tabwith the id fragment-1.</p></div><div id="tabCcard"><p>This is the content of the tabwith the id fragment-2.</p></div><div id="tabCheck"><p>This is the content of the tabwith the id fragment-3.</p></div></div>';
    $("#p2 .ui-content").append(tabs).enhanceWithin();
});

工作示例：http://jsfiddle.net/Gajotres/JAuwV/

【讨论】：

谢谢。你真的帮了我很多