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

Question

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

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

Answer 1

您可以使用标签API中的select方法来执行此操作。

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/