javascript - コンテンツのみを Navbar に置き換える

Question

コンテンツを navbar に置き換える方法を探していたところ、次のサイトを見つけました: Nested Content with Navbars using jQuery Mobileで、javascript の仕組みが完全に理解できません。はい、私はこの分野の初心者です。

それで、どういうわけか彼はこのコードでこのようなコンテンツを作成することができました:

<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>

と

(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);

navbars を使用して 3 つのコンテンツを作成するつもりでした。コードは次のとおりです。

<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>

サンプルのような前のページがありません。javascript を手伝ってくれる人はいますか?