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

Question

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

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

Answer 1

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

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

   <ul>
       <li><button type="button" class="tabs-link" data-tab="#tabs-1">Nunc tincidunt</button></li>
       <li><button type="button" class="tabs-link" data-tab="#tabs-2">Proin dolor</button></li>
       <li><button type="button" class="tabs-link" data-tab="#tabs-3">Aenean lacinia</button></li>
   </ul>
   

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

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

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