如何在 jQuery Mobile 中以编程方式切换导航栏选项卡？答案

【问题标题】：How do I programmatic toggle navbar tabs in jQuery Mobile?如何在 jQuery Mobile 中以编程方式切换导航栏选项卡？
【发布时间】：2012-05-30 18:17:49
【问题描述】：

如何在 jQuery Mobile 中切换导航栏的界面，以便按下 div 中的按钮并显示不同的导航栏？

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

jQuery Mobile NAV 切换的

jsFiddle Demo

我通过上面的链接创建了一个 jsFiddle 演示，应该可以解决您的问题。

特别是，您可以轻松设置 NAV 栏以及在不同栏之间切换。

我之所以说不同的条形图，是因为小提琴可以根据需要更多的 NAV 条形图，并且非常容易适应。可以肯定的是，5 个按钮处的任何 NAV 栏 maxs-out。

编辑：根据您的消息 cmets，一旦创建超过 1 个页面，就可以轻松在页面之间导航。这个不同的 jsFiddle 展示了如何标记锚标记以即时切换页面。此可与原始 jsFiddle 答案一起使用，以提供完整解决方案。

重新编辑：根据您最近的 cmets，此新 jsFiddle 允许在同一页面上切换按钮内容。

提供简单的 fiddle cmets 以了解发生了什么，但询问任何不清楚的地方。

【讨论】：

嗨@Efthimis让我说明我需要什么...我在顶部有两个选项卡，代表两个页面，在我的代码中，我按下下一步按钮我需要更改选项卡的颜色，在标签二上，我有一个返回按钮，需要切换第一个标签，这是一个插图imgur.com/UYcBZ
@AdamSurfari，这是 arttronics。在我的演示中，您将看到 data-theme 属性，它为各个锚链接指定按钮颜色。 a=黑色，b=蓝色，e=黄色，etc。锚链接本身可以使用并且每个可以设置来调用所需的NAV状态。这有帮助吗？
问题是我没有两页或两组导航栏锚。我有两个 div，所以我只有一组导航栏链接，我需要通过 onclick 事件进行更改。
编辑：我的答案的重新编辑部分提供了第三个 jsFiddle，您也可以访问 HERE。享受吧！
差不多了，但我可以看到你确定了 $('#navbar-1 ul li a').each(function() { $(this).removeClass('ui-btn -积极的'）; }）;必要的财产。谢谢！我想我可以从这里拿走。

【解决方案2】：

检查 updatelayout 事件。此事件由框架内动态显示/隐藏内容的组件触发，并作为一种通用机制来通知其他组件它们可能需要更新其大小或位置。来自 jQuery 网站的示例：

$( '#foo' ).hide().trigger( 'updatelayout' );

【讨论】：

我不太清楚你的意思？我想要做的是有一个外部按钮来切换两个导航栏“选项卡”。谢谢！

【解决方案3】：

这是您想要实现的目标吗？ http://jsfiddle.net/cHrSN/18/

【讨论】：

嗨@Efthimis让我说明我需要什么...我在顶部有两个选项卡，代表两个页面，在我的代码中，我按下下一步按钮我需要更改选项卡的颜色，在标签二上，我有一个返回按钮，需要切换第一个标签，这是一个插图imgur.com/UYcBZ

【解决方案4】：

您的选项卡是否必须集成到 JQM urlHistory 或浏览器历史记录中？

如果没有，我将 collapsible-set 更改为 tabviewer，因此我没有使用可折叠的 自上而下，而是将小部件更改为支持 data-type="horizontal"，然后显示可折叠从左到右，内容部分显示为标签。我还添加了 next-previous 按钮，因此您可以通过单击选项卡按钮或 prev-next 按钮来回切换。

但是，这一切都发生在页面内部，因此不支持浏览器后退按钮。

如果方向正确，我可以提供一个示例页面和解释。

【讨论】：

没有标签不需要在 url 上，如果您处于输入模式或图形模式，它只是显示的视觉变化。我基本上需要通过编程更改选项卡的活动参数。