15

我想在我的 jQuery Mobile 项目中有一个选项卡导航。我知道我可以使用数据角色“导航栏”，但我只想更改该导航栏下方的内容而不滑动到新页面。到目前为止，我只能有几个具有相同导航栏的不同页面相互链接，但这不是我想要的。

谁能帮我？

先感谢您

4

6 回答 6

32

您可以使用 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。

更新

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

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

更新

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

//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();
});​

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

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

这是一个例子： http: //jsfiddle.net/Cfbjv/25/（现在离线）

于 2011-07-27T19:24:39.507 回答
4

更新：在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;
    });
});
于 2012-02-16T21:56:51.950 回答
2

@迈克·巴特利特

我自己为此苦苦挣扎，但在打破 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();
  });

我的导航栏 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>

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

于 2012-06-27T17:03:01.343 回答
1

Please refers this below link for all kind of nav bar in 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>

thanks

于 2013-07-02T08:14:44.593 回答
1

我注意到这个问题是四年前提出的，所以我不确定当时 JQ Mobile 是否可以使用 Tab 小部件。不管怎样，我是 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>
于 2015-07-27T11:47:11.380 回答
0

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

我这样做是因为我有一堆在运行时加载到 DOM 中的“包含”文件，所以我不能像 Ryan 那样硬编码每个页面的第 n 个选项卡突出显示/处于活动状态。我也有幸在我的应用程序中只有一个标签栏。

$(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');
});
于 2014-10-14T02:00:46.783 回答