在 jQuery Mobile 中，页面切换是通过超链接和特定的属性来实现的。以下是一些基本的页面切换的示例：

基本页面切换
<!-- Home Page -->
<div data-role="page" id="home">
    <div data-role="header">
        <h1>Home Page</h1>
    </div>
    <div data-role="content">
        <p>Welcome to the Home Page!</p>
        <a href="#second-page" data-transition="slide">Go to Second Page</a>
    </div>
</div>

<!-- Second Page -->
<div data-role="page" id="second-page">
    <div data-role="header">
        <h1>Second Page</h1>
    </div>
    <div data-role="content">
        <p>This is the Second Page.</p>
        <a href="#home" data-transition="slide" data-direction="reverse">Go back to Home Page</a>
    </div>
</div>

在这个例子中，<a> 元素的 href 属性使用目标页面的 ID（例如 #second-page）来指定要跳转的页面。data-transition 属性指定页面切换的过渡效果，这里是 "slide"，表示使用滑动效果。data-direction 属性用于指定页面切换的方向，可以是 "reverse" 表示反向。

切换页面并传递参数

有时你需要在页面之间传递参数。你可以通过在链接中添加查询参数的方式实现：
<!-- Home Page -->
<div data-role="page" id="home">
    <div data-role="header">
        <h1>Home Page</h1>
    </div>
    <div data-role="content">
        <p>Welcome to the Home Page!</p>
        <a href="#second-page?param1=value1&param2=value2" data-transition="slide">Go to Second Page</a>
    </div>
</div>

<!-- Second Page -->
<div data-role="page" id="second-page">
    <div data-role="header">
        <h1>Second Page</h1>
    </div>
    <div data-role="content">
        <p>This is the Second Page.</p>
        <p>Received parameters:
            <span id="param1"></span>,
            <span id="param2"></span>
        </p>
        <a href="#home" data-transition="slide" data-direction="reverse">Go back to Home Page</a>
    </div>
    <script>
        // Extract parameters from the URL
        var params = new URLSearchParams(window.location.search);
        // Display parameters in the page
        document.getElementById('param1').innerHTML = params.get('param1');
        document.getElementById('param2').innerHTML = params.get('param2');
    </script>
</div>

在这个例子中，链接包含了查询参数（例如 ?param1=value1&param2=value2），而在第二个页面的脚本中，使用 JavaScript 提取并显示这些参数。

这只是 jQuery Mobile 页面切换的一个简单示例。你可以根据你的应用需求选择适当的页面切换方式和效果。


转载请注明出处：http://www.pingtaimeng.com/article/detail/9415/jQuery Mobile