具有启用下拉选项卡的jQuery UI选项卡

我目前正在使用jQuery UI进行页面导航，我正在尝试将下拉菜单集成到选项卡中，因为当有许多选项卡时，jQuery UI看起来不太好。要了解到目前为止我得到了什么，请看以下屏幕截图：

顶部是常规的jQueryUI选项卡，下部是新的菜单设计，鼠标悬停在“patient”上。新的菜单设计是纯CSS-简单分层ul和li标签显示：无或块取决于：悬停

试图替换默认的jQueryUI选项卡是一场噩梦。样式和jQuery功能似乎混合在一起，因为删除默认ID和类会破坏选项卡功能，但如果我将默认ID和类添加到新选项卡部分，则会添加不需要的样式以及其他奇怪的错误

我猜jQueryUITabs只需要一个包含选项卡的ul列表，但因为我的CSS实现对每个启用下拉菜单的选项卡都使用ul列表，所以它不喜欢它。我已经浏览了.js和.css文件，但说实话，我不确定我在寻找什么，因为我绝对不是这方面的专家

---

我一直在谷歌上搜索，但我能找到的唯一解决方案通常是实现一个旋转木马来隐藏/显示额外的标签，否则会被推到另一行。如何让jQuery UI选项卡与鼠标上方有下拉菜单的选项卡配合使用？

对于下拉菜单，您可以使用css，只需jQuery（.show）和（.hide）即可。将有一些简单的计算和css定位。每个标签容器应该有一个你的下拉菜单列表。悬停选项卡后，您可以显示容器。如果您的下拉列表下出现任何列表，您可以通过另一个列表显示，该列表将出现在下拉列表的右侧，该列表在下拉列表中被选中。您可以参考此链接。。这个想法让你的页面看起来不错

---

我花了很多时间寻找和挫折，但最终还是找到了解决办法。虽然不太理想，但它确实有效

我将ul标签直接隐藏在jqueryui与display:none一起使用的“tabs”div下，然后在其下方展开我的导航菜单

我编写了这个简单的函数来在页面之间导航（摘自）：

tabIndex的索引为零，因此如果您的选项卡为第2页，则tabIndex将为1。为选项卡提供唯一的id属性，然后使用一些jQuery将其展开，如：

$('#tabTwo').click(function() {
    changeTab(1);
    });

---

同样，这不是一个很好的解决方案，但重要的是它确实有效。

没有帮助。我很抱歉，我知道如何创建下拉列表，但它将它们与我请求帮助的jQuery UI选项卡集成。您可以轻松地将其与您的页面集成。如果单击您的选项卡，相关的选项卡容器将出现。我发布的站点是鼠标悬停的目标。您可以使用单击事件而不是鼠标悬停。如果任何标题有选项，您只需使用一些箭头标记即可。一旦用户单击箭头标记，您就可以显示内容。如果您使用jquery选项卡，您的代码将很高，我建议您使用简单的显示和隐藏。否，正如我在原始帖子中提到的，下拉选项显示为：悬停，而不是鼠标单击。同样，我知道如何创建下拉列表。我特别要求提供jQuery UI选项卡的集成帮助。我不确定我们是否相互理解。问题是没有一个列表显示在鼠标上方。问题在于将其与jQuery UI选项卡集成。jQuery UI选项卡似乎只允许每个选项卡有一个链接，因为它使用jQuery将类应用于每个选项卡，并读取每个

元素内的标记，这将其自身限制为每个选项卡只有一个选项

$('#tabTwo').click(function() {
    changeTab(1);
    });