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;
});

当然，如果没有 fiddle ，我们会在哪里:http://jsfiddle.net/Bsa7J/ .