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

Question

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

- Astronaut

Answer 1

jQuery Mobile NAV Toggle的jsFiddle 演示

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

特别是，您可以轻松地设置NAV栏，并在不同的栏之间进行切换。

我说不同的栏，因为这个小工具允许添加更多的NAV栏，并且非常容易适应。确保任何NAV栏最大化在5个按钮处。

编辑： 根据您的留言评论，一旦创建了超过1个页面，就可以轻松地在页面之间导航。这个不同的jsFiddle演示了如何在需要时切换页面标签。这可以与原始的jsFiddle答案一起使用，提供一个完整的解决方案。

重新编辑： 根据您最近的评论，这个新的jsFiddle允许在同一页上切换按钮内容。

提供简单的fiddle注释以理解正在发生的事情，但如果有任何不清楚的地方，请随时问。

- arttronics

---

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

@AdamSurfari，这是艺电科技。在我的演示中，您将看到data-theme属性，该属性指定了单个锚链接的按钮颜色。a=黑色，b=蓝色，e=黄色，等等。锚链接本身已经准备就绪，每个链接都可以设置为调用所需的NAV状态。这有帮助吗？ - arttronics

问题在于我没有两个页面或两组导航栏锚点。我有两个div，因此我只有一组导航栏链接需要通过onclick事件更改。 - Astronaut

那差不多了，但我可以看到你已经找到了必要的属性：$('#navbar-1 ul li a').each(function() { $(this).removeClass('ui-btn-active'); }); 谢谢！我想我可以自己处理了。 - Astronaut

谢谢！有很多类可以添加或删除，以实现视觉按钮状态，如按钮向上或向下。此外，您可以强制一个按钮处于活动状态，但是它的默认方案颜色会在“悬停”时显示。请注意，jQuery Mobile文档说不要使用Document Ready，而是使用他们自己的版本[HERE]（http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html），但这可能是PC开发工作失败的原因。我使用Firebug的HTML选项卡查看按钮交互期间的当前状态，以查看jQuery的操作，并模仿该行为。 - arttronics

Answer 2

您是想要实现这个效果吗？ http://jsfiddle.net/cHrSN/18/

- user1263800

---

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

Answer 3

你的选项卡是否需要集成在JQM urlHistory或浏览器历史记录中？

如果不需要，我将可折叠集更改为选项卡查看器，因此不再是从上到下的可折叠部件，而是支持data-type="horizontal"的小部件，然后将可折叠部分从左到右显示为选项卡。我还添加了下一个/上一个按钮，因此您可以通过单击选项卡按钮或上一个/下一个按钮来前进和后退。

但是，所有这些都发生在页面内部，因此没有浏览器后退按钮支持。

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

- frequent

---

不需要在 URL 上添加选项卡，这只是一种视觉上的更改，以显示您是否处于输入模式或图形模式。我基本上需要通过编程方式更改选项卡的活动参数。 - Astronaut

Answer 4

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

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

- Mali

---

我不太确定你的意思是什么？我的想法是有一个外部按钮来切换两个导航栏“选项卡”。谢谢！ - Astronaut