Question

我一直在搜索如何用navbar替换内容，我找到了这个网站：Nested Content with Navbars using jQuery Mobile，＆amp;完全无法理解javascript是如何工作的。是的，我是这个领域的新手。

所以，不知怎的，他设法使用以下代码创建this之类的内容：

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

我打算用我的导航栏创建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吗？

Answer 1

确保在代码中引用jQuery，jQuery Mobile 库。我假设上一个按钮的问题是，您没有页面和标题div包装器。

您必须使用他的确切标记，包括页面和标题div。

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

仅使用Navbar替换内容

1 个答案: