jQuery：菜单栏类似于“tabs”但不改变div

Question

我正在试图弄清楚如何生成像jQuery's tabs plugin这样的标签，但没有交换DIV。换句话说，我想要一个只绘制标签栏的jQuery插件（并让我指定选择哪个标签）。我会负责绘制内容，并在点击标签时发生事情。

Answer 1

您需要做的就是复制jQuery UI应用于选项卡的类，并且您已完成设置。

然后，当用户点击其中一个时，您还会动态添加/删除类。

这实际上是jQuery UI使用标签进行操作的方式。

以下是他们使用的一些示例类：

ui-tabs ui-widget ui-widget-content ui-corner-all

我通过在jQuery UI已经应用了标签功能之后检查DOM来获得这些。做同样的事情，你会看到你需要哪些类别的元素。

修改

这是完整的HTML：

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#">The selected tab</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#">Other tabs</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#">Other tabs</a></li>
    </ul>
</div>

这是Javascript：

$('.ui-tabs-nav li').mouseenter(function(){
    $(this).addClass('ui-state-hover');
})
.mouseleave(function(){
    $(this).removeClass('ui-state-hover');
})
.click(function(){
    $(this).addClass('ui-tabs-selected ui-state-active')
        .siblings().removeClass('ui-tabs-selected ui-state-active');

    return false;
});

当然，如果没有小提琴，我们会在哪里：http://jsfiddle.net/Bsa7J/。