使用 jQuery .tabs() - 内容覆盖页面

Question

我对 jQuery 很陌生。只是想感受一下。我喜欢这里演示的选项卡功能：

http://jqueryui.com/demos/tabs/#mouseover< /a>

我真的很喜欢这个，但是我希望它更像一个菜单。特别是我希望选项卡内容显示在页面内容之上（如菜单）。另外，就像当我滚动选项卡时内容会发生变化一样，当我没有滚动任何选项卡时（或者可能是当用户单击页面上的其他任何位置时），我希望选项卡内容消失（如菜单）。

所以我真的想用它作为菜单。如果有人知道可以解决我的问题的菜单控件也可以。我只是喜欢这样一个事实：当我将鼠标悬停在某个项目上时，会弹出一个 div。我想在每个 div 中放置一些文本和两个按钮。

谢谢！

这就是我最初的情况： 标题中的内容：

$("#tabs").tabs().find(".ui-tabs-nav").sortable({ axis: 'x' });
$("#tabs").tabs({ event: 'mouseover' });

正文中的内容：

 <div id="tabs">
            <ul>
                <li><a href="#tabs-1">First</a></li>
                <li><a href="#tabs-2">Second</a></li>
                <li><a href="#tabs-3">Third</a></li>
            </ul>
            <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
            <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
        </div>

Answer 1

jQuery 支持非常丰富的插件模型。您可能想查看 菜单插件 而不是尝试操作选项卡像菜单一样工作。

Answer 2

这里有一个示例，说明如何使用 jQuery 实现此类行为。该示例非常简单，但您可以根据需要设计它的样式。