Remplacer le contenu uniquement avec Navbar

Question

J'ai cherché comment remplacer le contenu avec navbar, et j'ai trouvé ce site: Nested Content with Navbars using jQuery Mobile, & ne peut pas comprendre comment fonctionne le javascript. oui, je suis un débutant dans ce domaine.

donc, en quelque sorte il a réussi à créer du contenu comme this avec ce code:

<div data-role="page"> 
    <div data-role="header"> 
    <div data-role="navbar"> 
     <ul> 
     <li><a href="#one" class="ui-btn-active ui-btn-persist">One</a></li> 
     <li><a href="#two">Two</a></li> 
     <li><a href="#three">Three</a></li> 
     </ul> 
    </div> 
    </div> 
    <div data-role="content"> 
    <div id="one">One content</div> 
    <div id="two">Two content</div> 
    <div id="three">Three content</div> 
    </div> 
</div> 

et

(function($) { 

// Before handling a page change... 
$(document).bind("pagebeforechange", function(e, data) 
{ 
    // If the new page is not being loaded by URL, bail 
    if (typeof data.toPage !== "string") 
    { 
     return; 
    } 

    // If the new page has a corresponding navbar link, activate its content div 
    var url = $.mobile.path.parseUrl(data.toPage); 
    var $a = $("div[data-role='navbar'] a[href='" + url.hash + "']"); 
    if ($a.length) 
    { 
     // Suppress normal page change handling since we're handling it here for this case 
     e.preventDefault(); 
    } 
    // If the new page has a navbar, activate the content div for its active item 
    else 
    { 
     $a = $(url.hash + " div[data-role='navbar']").find("a.ui-btn-active"); 

     // Allow normal page change handling to continue in this case so the new page finishes rendering 
    } 

    // Show the content div to be activated and hide other content divs for this page 
    var $content = $($a.attr("href")); 
    $content.siblings().hide(); 
    $content.show(); 
}); 

})(jQuery); 

j'allais créer 3 contenu avec mes navbars, et voici mon code:

<div data-role="navbar" data-iconpos="bottom"> 
     <ul> 
     <li><a href="#one" id="home" data-transition="fade" data-theme="" data-icon="home" class="ui-btn-active">Home</a></li> 
     <li><a href="#two" id="vmap" data-transition="fade" data-theme="" data-icon="star">V-Map</a></li> 
     <li><a href="#three" id="login" data-transition="fade" data-theme="" data-icon="check">Login</a></li> 
     </ul> 
    </div> 
    </div> 
    <div data-role="content" align="center" style="margin:2em 1em 2em 1em;"> 
    <div id="one">First Content</div> 
    <div id="two">Second Content</div> 
    <div id="three">Third Content</div> 
    </div> 

Je n'ai pas une page précédente comme l'échantillon a donné, quelqu'un peut-il m'aider w avec le javascript?

Answer 1

Assurez-vous que référence aux bibliothèques jQuery, jQuery Mobile dans votre code. Je suppose que le problème avec le bouton précédent est, que vous n'avez pas un page et en-tête div wrapper.

Vous devez utiliser son balisage exact, y compris la div page et en-tête.

<div data-role="page"> 
    <div data-role="header"> 
    <div data-role="navbar"> 
    <ul> 
     <li><a href="#one" class="ui-btn-active ui-btn-persist">One</a></li> 
     <li><a href="#two">Two</a></li> 
     <li><a href="#three">Three</a></li> 
    </ul> 
    </div> 
    </div> 
    <div data-role="content"> 
    <div id="one">One content</div> 
    <div id="two">Two content</div> 
    <div id="three">Three content</div> 
    </div> 
</div>