jQuery移动导航选项卡
我想在我的jQuery Mobile项目中有一个标签导航。 我知道我可以使用数据角色’navbar’，但我只想更改导航栏下面的内容而不刷新到新页面。 到目前为止，我只能有几个不同的页面，相同的导航栏相互链接，但这不是我想要的。
谁能帮我？
先感谢您
您可以使用jQuery Mobile导航栏样式，但使用您自己的点击处理程序，而不是更改页面，点击将只隐藏/显示同一页面上的正确内容。
HTML
onLoad Content Some 'A' Content Some 'B' Content 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中的所有匹配元素，而不仅仅是相对于单击按钮的元素。
//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 ：.closest() -
.siblings()： http ：.siblings()
这是一个例子： http ： //jsfiddle.net/Cfbjv/25/ （现在离线）
更新：在http://jsfiddle.net/ryanhaney/eLENj/查看我的jsfiddle
我只是花了一些时间搞清楚这一点，所以我想我会回答这个问题。 注意我使用的是多页单个文件YMMV。
$("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; }); });
@Mike Bartlett
我自己也在苦苦挣扎但是在打破了Jasper的代码之后，看起来他的post代码和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读取
这几乎与他相同，但由于某种原因，我没有“错误加载页面”消息。 希望有帮助……
我注意到这个问题是四年前提出来的，所以我不确定Tab小部件当时是否可用于JQ Mobile。 无论如何我是2015年的一个人
我在Jquery Mobile 1.4.5中使用的真棒解决方案
我喜欢@ Ryan-Haney的回答，但我想我会添加自己的草稿，如果有人能找到更有效的方法，那么请添加评论..谢谢
我是这样做的，因为我有一堆“包含”文件在运行时被加载到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'); });