如何使用 jQuery UI 选项卡在选项卡式内容下方添加导航？

Question

我正在使用 jQuery UI 选项卡作为带有使用默认功能的窗格的选项卡式界面。我想添加出现在 .ui-tabs DIV 之外的附加导航，这些导航只是包含在无序列表中的按钮（除了最顶部的选项卡式链接之外）。

有人能告诉我如何做到这一点吗？

Answer 1

您可以使用选项卡中的 select 方法来执行此操作API。

1. 添加无序列表的按钮。我使用 data 属性将按钮与选项卡关联起来：

   <前><代码>

   ;
   • Nunctincidunt
   • Proin dolor
   • Aenean lacinia

2. 将 click 事件处理程序绑定到这些按钮：

   $("button.tabs-link").bind("click", function($event) {
       $event.preventDefault();
       $("#tabs").tabs("select", $(this).data("tab"));
   });
   

这是一个工作示例：http://jsfiddle.net/5ZnYC/