Question

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

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

Answer 1

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

添加无序的按钮列表。我正在使用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>

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

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

以下是一个有效的例子：http://jsfiddle.net/5ZnYC/

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

1 个答案: