面板不更改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.