jQuery的：菜单栏类似“标签”，但没有改变的div

我试图找出如何产生像jQuery's tabs plugin标签，但没有资料核实的交换。换句话说，我想要一个只是绘制标签栏的jQuery插件（并让我指定选择哪个标签）。当点击标签时，我会照顾内容的绘制和事情的发生。jQuery的：菜单栏类似“标签”，但没有改变的div

来源

2011-08-18 Eric

你在寻找什么样的解决方案，CSS来制作标签？ –

理想情况下，一个jQuery插件...希望制表符是建立在另一个做实际绘图的插件上，但并不是这种情况。如果可能的话，我想坚持使用jQuery，因为我喜欢ThemeRoller的工作方式，并准备好样式表。我的目标是不要“手动”制作标签。 – Eric

Eric，这当然可以用CSS来完成。不知道你的意思是“绘制”或“手动制作标签”，即使jQuery UI也只是使用CSS来创建外观，这似乎是你所追求的。 –

所有你需要做的，就是复制jQuery用户界面适用于标签的类，你所有的设置。

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

这实际上是jQuery UI在选项卡上执行的方式。

下面是他们使用了一些示例类：

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

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

编辑：

下面是完整的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>

而这里的Java脚本：

$('.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/ 。

来源

2011-08-18 01:38:42

我明白你的意思了 - 我喜欢这个想法，尽管它比我更喜欢jQuery的内容。如果没有更优雅的方式，这可能是最好的答案。谢谢回复。 – Eric

它根本不复杂*。看到我更新的答案。 –

@Eric：如果这还不够，我现在已经添加了所有**代码，以使其工作。 –

jQuery的：菜单栏类似“标签”，但没有改变的div

回答

相关问题