2016-11-12 75 views
0

我試圖編寫一個面板,它關閉並在用戶點擊鏈接後更改當前頁面,但點擊鏈接後沒有任何反應。面板不更改jquery mobile中的頁面

我最初試圖用標籤(即。)來改變頁面無濟於事。這裏是我的代碼:

$("a").on("tap", function(){ 
 
    switch($(this).attr("id")) { 
 
\t \t case "#woke": 
 
\t \t \t $.mobile.changePage("#woke"); 
 
\t \t \t break; 
 
     case "#network": 
 
\t \t \t $.mobile.changePage("#network"); 
 
\t \t \t break; 
 
    } 
 
});
<html lang="en"> 
 
\t <head> 
 
\t \t <title>Organize.me</title> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t \t <link rel="stylesheet" href="main.css" type="text/css"/> 
 
\t \t <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
\t \t <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
\t \t <script src="main.js"></script> 
 
\t \t <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
\t \t 
 
\t </head> 
 
\t 
 
\t <body> \t \t \t \t \t 
 
\t \t <div data-role="page" id="woke"> 
 
\t \t \t <!--Navigation panel with links--> 
 
\t \t \t <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> 
 
\t \t \t \t <div data-role="header"> \t \t \t \t \t \t 
 
\t \t \t \t \t \t <h1>Menu</h1> \t 
 
\t \t \t \t \t \t <a href="#network" data-rel="close" class="ui-btn ui-btn-right ui-icon-back ui-btn-icon-left">Back</a> 
 
\t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t <nav><ul data-role="listview" data-inset="true"> \t 
 
\t \t \t \t \t <a href="#woke" class="nav-woke"><li class="buttons">Get Woke</li></a> 
 
\t \t \t \t \t <a href="#network"><li class="buttons">My Network</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Find Orgs</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Events</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Voting</li></a> \t \t \t 
 
\t \t \t \t </ul></nav> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!--Header--> 
 
\t \t \t <div data-role="header"> 
 
\t \t \t \t <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> 
 
\t \t \t \t <h1>Get Woke</h1> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!--Content--> 
 
\t \t \t <div data-role="content"></div> 
 
\t \t \t 
 
\t \t \t <!--Footer--> 
 
\t \t \t <div data-role="footer">&copy;Scripts of Steele</footer> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div data-role="page" id="network"> 
 
\t \t \t <!--Navigation panel with links--> 
 
\t \t \t <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> 
 
\t \t \t \t <div data-role="header"> 
 
\t \t \t \t \t \t <a href="#network" data-rel="close" class="ui-btn ui-icon-back ui-btn-icon-left">Back</a> 
 
\t \t \t \t \t \t <h1>Menu</h1> \t \t \t \t 
 
\t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t <nav><ul data-role="listview" data-inset="true"> \t 
 
\t \t \t \t \t <a href="#woke" data-rel="open"><li class="buttons">Get Woke</li></a> 
 
\t \t \t \t \t <a href="#network" data-rel="open"><li class="buttons">My Network</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Find Orgs</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Events</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Voting</li></a> \t \t \t 
 
\t \t \t \t </ul></nav> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!--Header--> 
 
\t \t \t <div data-role="header"> 
 
\t \t \t \t <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> 
 
\t \t \t \t <h1>My Networks</h1> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!--Content--> 
 
\t \t \t <div data-role="content"></div> 
 
\t \t \t 
 
\t \t \t <!--Footer--> 
 
\t \t \t <div data-role="footer">&copy;Scripts of Steele</footer> 
 
\t \t </div> 
 
\t \t 
 
\t </body> 
 
</html>

回答

0

您選擇id但也許你要選擇的href(或更好,添加一個id)

$("a").on("tap", function(){ 
 
    switch($(this).attr("href")) { 
 
\t \t case "#woke": 
 
      console.log("#woke"); 
 
\t \t \t $.mobile.changePage("#woke"); 
 
\t \t \t break; 
 
     case "#network": 
 
      console.log("#network"); 
 
\t \t \t $.mobile.changePage("#network"); 
 
\t \t \t break; 
 
    } 
 
});
<html lang="en"> 
 
\t <head> 
 
\t \t <title>Organize.me</title> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t \t <link rel="stylesheet" href="main.css" type="text/css"/> 
 
\t \t <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
\t \t <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
\t \t <script src="main.js"></script> 
 
\t \t <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
\t \t 
 
\t </head> 
 
\t 
 
\t <body> \t \t \t \t \t 
 
\t \t <div data-role="page" id="woke"> 
 
\t \t \t <!--Navigation panel with links--> 
 
\t \t \t <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> 
 
\t \t \t \t <div data-role="header"> \t \t \t \t \t \t 
 
\t \t \t \t \t \t <h1>Menu</h1> \t 
 
\t \t \t \t \t \t <a href="#network" data-rel="close" class="ui-btn ui-btn-right ui-icon-back ui-btn-icon-left">Back</a> 
 
\t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t <nav><ul data-role="listview" data-inset="true"> \t 
 
\t \t \t \t \t <a href="#woke" class="nav-woke"><li class="buttons">Get Woke</li></a> 
 
\t \t \t \t \t <a href="#network"><li class="buttons">My Network</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Find Orgs</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Events</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Voting</li></a> \t \t \t 
 
\t \t \t \t </ul></nav> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!--Header--> 
 
\t \t \t <div data-role="header"> 
 
\t \t \t \t <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> 
 
\t \t \t \t <h1>Get Woke</h1> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!--Content--> 
 
\t \t \t <div data-role="content"></div> 
 
\t \t \t 
 
\t \t \t <!--Footer--> 
 
\t \t \t <div data-role="footer">&copy;Scripts of Steele</footer> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div data-role="page" id="network"> 
 
\t \t \t <!--Navigation panel with links--> 
 
\t \t \t <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> 
 
\t \t \t \t <div data-role="header"> 
 
\t \t \t \t \t \t <a href="#network" data-rel="close" class="ui-btn ui-icon-back ui-btn-icon-left">Back</a> 
 
\t \t \t \t \t \t <h1>Menu</h1> \t \t \t \t 
 
\t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t <nav><ul data-role="listview" data-inset="true"> \t 
 
\t \t \t \t \t <a href="#woke" data-rel="open"><li class="buttons">Get Woke</li></a> 
 
\t \t \t \t \t <a href="#network" data-rel="open"><li class="buttons">My Network</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Find Orgs</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Events</li></a> 
 
\t \t \t \t \t <a href="#"><li class="buttons">Voting</li></a> \t \t \t 
 
\t \t \t \t </ul></nav> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!--Header--> 
 
\t \t \t <div data-role="header"> 
 
\t \t \t \t <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> 
 
\t \t \t \t <h1>My Networks</h1> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!--Content--> 
 
\t \t \t <div data-role="content"></div> 
 
\t \t \t 
 
\t \t \t <!--Footer--> 
 
\t \t \t <div data-role="footer">&copy;Scripts of Steele</footer> 
 
\t \t </div> 
 
\t \t 
 
\t </body> 
 
</html>

+0

謝謝,但這並沒有改變我的任何東西 –

+0

@AndrewS。你想改變什麼?在控制檯中是否收到任何錯誤消息? – user2314737

+0

我只是試圖改變當前正在顯示的頁面。在Chrome上的開發者模式控制檯中,我沒有收到任何錯誤 –