jquery显示隐藏请求的页面

jquery show hide the requested page

本文关键字：请求 显示 隐藏 jquery      更新时间：2023-09-26

>问题是在html中的页面中显示/隐藏请求的特定页面。我尝试的代码如下所示。谁能给我指出正确的方向。我在吹代码中试图只显示第三页，但它显示了第一页。

<!DOCTYPE html PUBLIC >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" /> 
<script src="jquery-1.8.1.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>   
<script>
$("#pageone").hide();
$("#pagetwo").hide();
$("#pagethree").show();
</script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>page one</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>page one contents </p>
  </div>
  <div data-role="footer">
    <h1>page one</h1>
  </div>
</div> 
<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>page two</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>page two contents</p>
  </div>
  <div data-role="footer">
    <h1>page two</h1>
  </div>
</div> 

<div data-role="page" id="pagethree">
  <div data-role="header">
    <h1>page three</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>page three contents...</p>
  </div>
  <div data-role="footer">
    <h1>page three</h1>
  </div>
</div> 

</body>
</html>

要防止页面在显示下一页之前显示或重定向用户，您需要收听pagebeforechange事件。此事件在开始更改页面转换并更新 URL 历史记录之前触发。

发出pagebeforechange时，它会省略保存上一页和下一页详细信息的数据对象。使用此数据来确定用户正在浏览的页面和页面。

$(document).on("pagebeforechange", function (e, data) {
    var nextPage = data.toPage,
        prevPage = data.options.fromPage;
    if (typeof nextPage === "object" && typeof prevPage === "undefined") {
        var page = nextPage[0].id;
        if (page === "pageone") {
            $.mobile.changePage("#pagethree", {
                transition: "flip"
            });
            return false;
        }
    }
});

使用.show()或.hide()将使您一事无成。此外，不要在 jQuery Mobile 中使用 .ready() 或 $(function () {});，而改用页面事件。

演示

尝试将代码放入 pagecreate 事件中：

在 DOM 中创建页面时触发（通过 ajax 或 其他），毕竟所有小部件都有机会增强 包含标记。

<script>
$(document).on('pagecreate', function() {
    $("#pageone").hide();
    $("#pagetwo").hide();
    $("#pagethree").show();
});
</script>

<script>
$(document).ready(function()
{
$("#pageone").hide();
$("#pagetwo").hide();
$("#pagethree").show();
});
</script>
相关文章：