显示ajax获取的html文档的第二个“页面”

Question

我有一个名为index.html的第一页，其中我有两个链接“红色水果”和“黄色水果”。

然后我有“fruits.html”，它有两个id为“redFruits”，“yellowFruits”的jquery页面。

当有人点击index.html上的“黄色水果”链接时，我需要显示fruits.html的第二个“页面”。默认情况下，jquery mobile显示“fruits.html”的第一页。

如何链接到ajax获取文档的随机页面。

“index.html”

<div data-role="content">
        <a href="fruitsList.html" data-role="button">List of red fruits</a>
        <a href="fruitsList.html" data-role="button">List of yellow fruits</a>
    </div>

fruits.html

....
<div data-role="page" id="redFruits">
....
       <p data-role="content">
        <ul>
            <li>apple 1</li>
            <li>apple 2</li>
            <li>apple 3</li>
        </ul>
    </p>
.....
</div>
<div data-role="page" id="yellowFruits">
    .....
    <p data-role="content">
        <ul>
            <li>lemon</li>
            <li>papaya</li>
            <li>yellow fig</li>
        </ul>
    </p>
         .....
</div>

Answer 1

您可以通过哈希标记引用多页文档中的子页面：

<a href="fruitsList.html#redFruits" rel="external" data-role="button">List of red fruits</a>
<a href="fruitsList.html#yellowFruits" rel="external" data-role="button">List of yellow fruits</a>

Answer 2

您可以使用pageparams插件将数据发送到第二页 - 在这种情况下是要显示的页面的#id。 在pagebeforeshow page2中，您可以检查传递的参数和changePage()。