Question

我希望在我的jQuery Mobile项目中有一个标签导航。我知道我可以使用数据角色'navbar'但我只想更改导航栏下面的内容而不刷新到新页面。到目前为止，我只能有几个不同的页面，相同的导航栏相互链接，但这不是我想要的。

任何人都可以帮助我吗？

提前谢谢

Answer 1

您可以使用jQuery Mobile导航栏样式，但使用您自己的点击处理程序，而不是更改页面，点击只会隐藏/显示同一页面上的正确内容。

HTML

<div data-role="navbar">
    <ul>
        <li><a href="#" data-href="a">One</a></li>
        <li><a href="#" data-href="b">Two</a></li>
    </ul>
</div><!-- /navbar -->
<div class="content_div">onLoad Content</div>
<div id="a" class="content_div">Some 'A' Content</div>
<div id="b" class="content_div">Some 'B' Content</div>

JAVASCRIPT

$(document).delegate('[data-role="navbar"] a', 'click', function () {
    $(this).addClass('ui-btn-active');
    $('.content_div').hide();
    $('#' + $(this).attr('data-href')).show();
    return false;//stop default behavior of link
});

CSS

.content_div {
    display: none;
}
.content_div:first-child {
    display: block;
}

以下是上述代码的jsfiddle：http://jsfiddle.net/3RJuX/

注：

导航栏中的每个链接都有一个“data-href”属性设置为将显示的div（或您要使用的任何容器）的id。

<强>更新

1年后，我回到了这个答案，并注意到委托事件处理程序选择器可以进行一些优化以利用类而不是属性（这比查找要快得多）：

$(document).delegate('.ui-navbar a', 'click', function () {
    $(this).addClass('ui-btn-active');
    $('.content_div').hide();
    $('#' + $(this).attr('data-href')).show();
});

<强>更新

通过使用相对选择器而不是绝对选择器（如$('.content_div')），可以使此代码更加模块化，因为这将选择DOM中的所有匹配元素，而不仅仅是相对于单击按钮的元素。< / p>

//same selector here
$(document).delegate('.ui-navbar ul li > a', 'click', function () {

    //un-highlight and highlight only the buttons in the same navbar widget
    $(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active');

    //this bit is the same, you could chain it off of the last call by using two `.end()`s
    $(this).addClass('ui-navbar-btn-active');

    //this starts the same but then only selects the sibling `.content_div` elements to hide rather than all in the DOM
    $('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();
});

这允许您在页面或伪页面上嵌套选项卡和/或具有多组选项卡。

使用的“相对选择器”的一些文档：

.closest()：http://api.jquery.com/closest
.siblings()：http://api.jquery.com/siblings

以下是一个示例：http://jsfiddle.net/Cfbjv/25/（现在已离线）

Answer 2

更新：在http://jsfiddle.net/ryanhaney/eLENj/

查看我的jsfiddle

我只是花了一些时间搞清楚这一点，所以我想我会回答这个问题。注意我使用的是多页单个文件YMMV。

<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>
            <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>
            <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>
        </ul>
    </div>
</div>

$("div[data-role=page]").bind("pagebeforeshow", function () {
    // prevents a jumping "fixed" navbar
    $.mobile.silentScroll(0);
});

$("a[data-role=tab]").each(function () {
        // bind to click of each anchor
        var anchor = $(this);
        anchor.bind("click", function () {
            // change the page, optionally with transitions
            // but DON'T navigate...
            $.mobile.changePage(anchor.attr("href"), {
                transition: "none",
                changeHash: false
        });

        // cancel the click event
        return false;
    });
});

Answer 3

@Mike Bartlett

我自己也很挣扎但是在打破了Jasper的代码后，看起来他的帖子代码和jsfiddle页面上有一些细微差别。

他发布的地方

$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show(); });

我发现更改最后一行只是简单地调用您在导航栏中设置“data-href”值的任何内容很有用。

$('div[data-role="navbar"] a').live('click', function () {
    $(this).addClass('ui-btn-active');
    $('div.content_div').hide();
    $($(this).attr('data-href')).show();
  });

我的navbar html然后读取

<div data-role="navbar">
<ul>
    <li><a href="#" data-href="#a">One</a></li>
    <li><a href="#" data-href="#b">Two</a></li>
</ul>

这几乎与他相同，但出于某种原因，我没有收到“错误加载页面”消息。希望有所帮助...

Answer 4

请参阅以下链接，了解jquery中所有类型的导航栏

http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html

<div data-role="navbar">
   <ul>
    <li><a href="a.html" class="ui-btn-active">One</a></li>
    <li><a href="b.html">Two</a></li>
   </ul>
</div>

感谢

Answer 5

我注意到这个问题是在四年前提出来的，所以我不确定Tab小部件当时是否可用于JQ Mobile。无论如何我是2015年的一个人

我在Jquery Mobile 1.4.5中使用的真棒解决方案

<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#one" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
    <h1>First tab contents</h1>
  </div>
  <div id="two">
    <ul data-role="listview" data-inset="true">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></li>
    </ul>
  </div>
</div>

Answer 6

我喜欢@ Ryan-Haney的回答，但我想我会加入自己的草稿，如果有人能找到更有效的方法，那么请添加评论..谢谢< / p>

我是这样做的，因为我有一堆＆＃34;包括＆＃34;在运行时加载到DOM中的文件，因此我无法硬编码第j个选项卡突出显示/激活每个页面，如Ryan可以。我也很幸运，在我的应用程序中只有一个标签栏。

$(document).delegate('.ui-navbar a', 'tap', function ()
{
  $('.ui-navbar').find('li').find('a').removeClass('ui-btn-active');
  $('.ui-navbar').find('li:nth-child(' + ($(this).parent().index() + 1) + ')').find('a').addClass('ui-btn-active');
});

jQuery移动导航选项卡

6 个答案: