jQuery移动导航选项卡

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

谁能帮我？

先感谢您

Answer 1

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

HTML

 
 
One
 
Two
 
 
 
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/ （现在离线）

Answer 2

更新：在http://jsfiddle.net/ryanhaney/eLENj/查看我的jsfiddle

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

 
 
 
 
Page 1
 
Page 2
 
Page 3
 
 
 
 $("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的代码之后，看起来他的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读取

 
 
 
One
 
Two
  

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

Answer 4

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

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

 
 
 
One
 
Two
 
  

谢谢

Answer 5

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

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

 
  
    
      
one
      
two
      
three
    
  
  
    
First tab contents
  
  
    
        
Acura
        
Audi
        
BMW
        
Cadillac
        
Ferrari
    
  
  

Answer 6

我喜欢@ 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'); });