面板不改变页面在jquery移动
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>您正在选择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>相关文章：
- 正在SharePoint 2013母版页中添加JQuery移动文件
- JQuery移动动态分区页面
- jquery移动对齐按钮取决于内容大小
- 在websql成功调用中Jquery移动主题打开按钮
- 通过格式化将jquery移动组件动态添加到列表视图中
- Jquery移动转换复选框在Jquery onclick函数(）中第二次选中不起作用
- jQuery移动列表视图和面板
- 将代码从jquery移动到angularjs
- 无法使用谷歌地图获得多页jquery移动版
- jquery移动应用程序无法使用jquryMobile框架JS和css文件的相对路径
- 使用 jQuery(移动）更新多个选择标签
- 如何在页面之间导航后停止jquery移动中的重复数据
- 如果我在jquery移动中使用“onclick”，按钮不会改变颜色
- jQuery 移动内部页面问题
- 在 jquery 移动中离开页面时结束 SetInterval 函数
- jQuery移动显示页面5秒钟，然后重定向
- 如何正确实现Jquery移动路由器插件
- 带有scrollTop的JQuery移动错误
- Jquery移动列表视图图标未正确显示
- 动态更改jQuery移动图标的背景颜色
