2016-11-12 3 views
0

J'essaye de coder un panneau qui ferme et change la page actuelle après qu'un utilisateur ait tapé sur un lien mais rien ne se passe après que les liens aient été tapés.Panneau ne changeant pas de page dans jquery mobile

J'ai essayé à l'origine de changer la page avec des étiquettes (c.-à-d.) En vain. Voici mon code:

$("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>

Répondre

0

Vous sélectionnez un id mais peut-être que vous voulez sélectionner le href (ou mieux, ajouter un 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

Merci, mais cela n'a rien changé pour moi –

+0

@AndrewS. qu'est-ce que tu essayes de changer? Avez-vous des messages d'erreur dans la console? – user2314737

+0

J'essaie seulement de changer la page actuelle qui est affichée. Dans la console du mode développeur sur chrome, je ne reçois aucune erreur –