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

Question

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

http://jqueryui.com/demos/tabs/#mouseover

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

所以我真的想用它作为菜单。如果有人知道可以解决我的问题的菜单控件也可以。我只是喜欢这样一个事实:当我将鼠标悬停在某个项目上时，会弹出一个 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 支持 very rich plugin model 。您可能想查看Menu Plugin而不是尝试像菜单一样操作选项卡。