面板不更改jQuery Mobile中的頁面
[英]Panel not changing page in jquery mobile
問題描述
我正在嘗試編寫一個面板，以便在用戶點擊鏈接后關閉並更改當前頁面，但是在點擊鏈接后沒有任何反應。
我最初試圖通過添加標簽（即）來更改頁面，但無濟於事。 這是我的代碼：
$("a").on("tap", function(){ switch($(this).attr("id")) { case "#woke": $.mobile.changePage("#woke"); break; case "#network": $.mobile.changePage("#network"); break; } });
<html lang="en"> <head> <title>Organize.me</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css" type="text/css"/> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="main.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="woke"> <!--Navigation panel with links--> <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> <div data-role="header"> <h1>Menu</h1> <a href="#network" data-rel="close" class="ui-btn ui-btn-right ui-icon-back ui-btn-icon-left">Back</a> </div> <nav><ul data-role="listview" data-inset="true"> <a href="#woke" class="nav-woke"><li class="buttons">Get Woke</li></a> <a href="#network"><li class="buttons">My Network</li></a> <a href="#"><li class="buttons">Find Orgs</li></a> <a href="#"><li class="buttons">Events</li></a> <a href="#"><li class="buttons">Voting</li></a> </ul></nav> </div> <!--Header--> <div data-role="header"> <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> <h1>Get Woke</h1> </div> <!--Content--> <div data-role="content"></div> <!--Footer--> <div data-role="footer">©Scripts of Steele</footer> </div> <div data-role="page" id="network"> <!--Navigation panel with links--> <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> <div data-role="header"> <a href="#network" data-rel="close" class="ui-btn ui-icon-back ui-btn-icon-left">Back</a> <h1>Menu</h1> </div> <nav><ul data-role="listview" data-inset="true"> <a href="#woke" data-rel="open"><li class="buttons">Get Woke</li></a> <a href="#network" data-rel="open"><li class="buttons">My Network</li></a> <a href="#"><li class="buttons">Find Orgs</li></a> <a href="#"><li class="buttons">Events</li></a> <a href="#"><li class="buttons">Voting</li></a> </ul></nav> </div> <!--Header--> <div data-role="header"> <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> <h1>My Networks</h1> </div> <!--Content--> <div data-role="content"></div> <!--Footer--> <div data-role="footer">©Scripts of Steele</footer> </div> </body> </html>
1 個解決方案
解決方案1
0 2016-11-12 17:50:09
您正在選擇一個id但可能要選擇href （或者最好是添加一個ID）
$("a").on("tap", function(){ switch($(this).attr("href")) { case "#woke": console.log("#woke"); $.mobile.changePage("#woke"); break; case "#network": console.log("#network"); $.mobile.changePage("#network"); break; } });
<html lang="en"> <head> <title>Organize.me</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css" type="text/css"/> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="main.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="woke"> <!--Navigation panel with links--> <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> <div data-role="header"> <h1>Menu</h1> <a href="#network" data-rel="close" class="ui-btn ui-btn-right ui-icon-back ui-btn-icon-left">Back</a> </div> <nav><ul data-role="listview" data-inset="true"> <a href="#woke" class="nav-woke"><li class="buttons">Get Woke</li></a> <a href="#network"><li class="buttons">My Network</li></a> <a href="#"><li class="buttons">Find Orgs</li></a> <a href="#"><li class="buttons">Events</li></a> <a href="#"><li class="buttons">Voting</li></a> </ul></nav> </div> <!--Header--> <div data-role="header"> <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> <h1>Get Woke</h1> </div> <!--Content--> <div data-role="content"></div> <!--Footer--> <div data-role="footer">©Scripts of Steele</footer> </div> <div data-role="page" id="network"> <!--Navigation panel with links--> <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> <div data-role="header"> <a href="#network" data-rel="close" class="ui-btn ui-icon-back ui-btn-icon-left">Back</a> <h1>Menu</h1> </div> <nav><ul data-role="listview" data-inset="true"> <a href="#woke" data-rel="open"><li class="buttons">Get Woke</li></a> <a href="#network" data-rel="open"><li class="buttons">My Network</li></a> <a href="#"><li class="buttons">Find Orgs</li></a> <a href="#"><li class="buttons">Events</li></a> <a href="#"><li class="buttons">Voting</li></a> </ul></nav> </div> <!--Header--> <div data-role="header"> <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> <h1>My Networks</h1> </div> <!--Content--> <div data-role="content"></div> <!--Footer--> <div data-role="footer">©Scripts of Steele</footer> </div> </body> </html>
如何使JQuery移動面板始終保持在頁面上顯示的一部分？
[英]How to make JQuery mobile panel always remain a part of that showing on page?
在jQuery Mobile中打開菜單面板時，頁面會回滾到頂部
[英]Page scrolls back to top when the menu panel is opened in jQuery Mobile
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.