Question

我目前正在使用jQuery UI进行页面导航，我正在尝试将下拉菜单集成到选项卡中，因为当有很多选项卡时，jQuery UI看起来不太好。要了解到目前为止我所看到的内容，请查看此屏幕截图：http://i.imgur.com/T9lwLI8.png

顶部是常规的jQuery-UI选项卡，下部是新的菜单设计，鼠标悬停在'患者'上。新的菜单设计是纯CSS - 简单的分层ul和li标签显示：none或block取决于：hover。

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

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

我一直在谷歌搜索，但我能找到的唯一解决方案通常是实施旋转木马隐藏/显示额外的标签，否则将被推到另一条线。如何使用jQuery UI选项卡来处理鼠标悬停时具有下拉菜单的选项卡？

Answer 1

经过了大量的搜索和挫折，但我终于设法找到了解决方案。它并不完全理想，但它确实有效。

我将ul标签直接隐藏在'tabs'div下，jQuery UI使用display：none然后在我的下面展示我的导航菜单。

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

function changeTab(tabIndex) {
    $("#tabs").tabs( "option", "active", tabIndex );    
    }

tabIndex是零索引的，所以如果你的标签是＃page-2那么tabIndex将是1.给你的标签赋予唯一的id属性然后用一些jQuery推出它：

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

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

Answer 2

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

http://foundation.zurb.com/page-templates4/grid.html

带有下拉列表的jQuery UI选项卡

2 个答案: