jquery show隐藏请求的页面

问题是在html中的页面中显示/隐藏所请求的特定页面。我试过的代码如下所示。任何人都可以指出我的正确方向。我试图仅显示pagethree的吹码，但它显示pageone。jquery show隐藏请求的页面

<!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>

来源

2014-04-04 user3051677

您的代码和下面的答案是错的。显示/隐藏不是你的解决方案。你需要使用'pagebeforechange'事件。 – Omar

您使用的是JQM 1.4吗？因为现在解决方案略有不同。 – Omar

不，我正在使用JQM 1.2。 – user3051677

为了防止网页显示或重定向用户之前显示下页，你需要听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() {});，而应使用Page Events来代替。

Demo

来源

2014-04-04 08:44:45 Omar

-1

尽量把你的代码中pagecreate事件：

当页面已经在DOM中创建（通过AJAX或等）触发，所有部件后有机会到增强包含标记的。

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

来源

2014-04-04 04:03:01 Felix

工程，但页面失去其CSS格式。 – user3051677

'pagecreate'或'.ready'不是能让任何代码正常工作的mafi词。在发布完全错误的答案之前，您应该了解JQM的工作方式。 – Omar

为什么不只是发表一个帮助OP的答案？ – Felix

-2

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

来源

2014-04-04 04:19:01

这个工作适合我。为什么没有投票？查看JSFEDEL http://jsfiddle.net/sjnilan/PaGA4/ –

jquery show隐藏请求的页面

回答

相关问题