Jquery mobile 导航栏内容加载所有选项_Jquery Mobile

Jquery mobile 导航栏内容加载所有选项

jquery-mobile

Jquery mobile 导航栏内容加载所有选项,jquery-mobile,Jquery Mobile,我在Jquery mobile中有一个导航栏，它有5个内容，每个内容现在都有一个文本。问题在于，我第一次加载页面时，在第一个选项卡中加载了所有内容，并且只要您开始按下按钮，内容就会正常加载，如下图所示：然后，当我开始单击按钮时，内容将正确显示：下面是我正在使用的代码： Javascript: <script> (function($) { // Before handling a page change... $(document).bind("pagebeforecha

我在Jquery mobile中有一个导航栏，它有5个内容，每个内容现在都有一个文本。问题在于，我第一次加载页面时，在第一个选项卡中加载了所有内容，并且只要您开始按下按钮，内容就会正常加载，如下图所示：

然后，当我开始单击按钮时，内容将正确显示：

下面是我正在使用的代码：

Javascript:

<script>

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


（函数（$）{
//在处理页面更改之前。。。
$（文档）.bind（“pagebeforechange”，函数（e，数据）
{
//如果URL未加载新页面，请退出
if（typeof data.toPage！=“字符串”）
{
返回；
}
//如果新页面具有相应的导航栏链接，请激活其内容div
var url=$.mobile.path.parseUrl（data.toPage）；
var$a=$（“div[data role='navbar']a[href='”+url.hash+“]”）；
如果（$a.length）
{
//抑制正常的页面更改处理，因为我们在这里处理此情况
e、 预防默认值（）；
}
//如果新页面有导航栏，请激活其活动项的内容div
其他的
{
$a=$（url.hash+“div[data role='navbar']”）。查找（“a.ui-btn-active”）；
//在这种情况下，允许继续正常的页面更改处理，以便新页面完成渲染
}
//显示要激活的内容div并隐藏此页面的其他内容div
var$content=$（$a.attr（“href”）；
$content.sides（）.hide（）；
$content.show（）；
});
})（jQuery）；

以下是HTML：

<body>

  <div data-role="page">
   <div data-role="header">
     <div data-role="navbar">
       <ul>
        <li><a href="#oneContent" class="ui-btn-active ui-btn-persist">One</a></li>
        <li><a href="#twoContent">Two</a></li>
        <li><a href="#threeContent">Three</a></li>
    <li><a href="#fourContent">Four</a></li>
    <li><a href="#fiveContent">Five</a></li>
      </ul>
  </div>
  </div>
<center>
         <div data-role="content">
       <div id="oneContent">First</div>
       <div id="twoContent">Second</div>
       <div id="threeContent">Third</div>
       <div id="fourContent">Fourth</div>
       <div id="fiveContent">Fifth</div>
   </div>
   </center>
   </div>

</body>









弗斯特
第二
第三
第四
第五

如何避免在第一次加载时加载所有内容的问题？

更新以回答下面的新请求如果希望第一个选项卡在默认情况下显示，请分别设置它们的CSS，然后将它们切换到视图中

首先将其放入您的

或链接的CSS文件中：

<style>[data-role=content] > div { display: none; }</style>

谢谢，这几乎是我所需要的，你知道当页面加载时如何显示第一个选项卡的内容吗？调整以适应新的限制。希望这有帮助：）我删除了我原来的答案，取而代之的是这一个，因为它更通用、更符合逻辑。谢谢，但它不起作用，我将所有内容都打包在一个html中，默认情况下它不会加载第一个选项。此外，当选择其他按钮时，它们将变为白色，而不是原来的蓝色。我复制了head、脚本和html中的所有内容，问题仍然存在。我添加了$（document）.ready（function（）{}，并在该函数中调用导航栏中的第一个元素。请进行必要的更正，以便我可以投票支持您的答案（这对我帮助很大）。非常感谢您的帮助：）我将您的答案标记为有效。

(function ($) {
    $(document).ready(function() {
        var path = (window.location.hash) ? window.location.hash : '#oneContent';
        $(path).show();
    });
    $(document).bind("pagebeforechange", function (e, data) {
    ....