我正在尝试使用 Jquery 菜单目标功能实现 Jquery ui 选项卡，但它不起作用，但它适用于引导程序。有没有人尝试过在 JQuery 垂直 UI 选项卡上实现此功能？请帮助我的代码如下。
这就是我想要使用 Jquery Ui 垂直 UI 选项卡实现的（http://static.tumblr.com/9hgswys/iNYmj8gfd/new-full.gif）。
<!-- My code -->
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.menu-aim.js"></script>
<script src="js/menu-hover-fixes.js"></script>
<script>
$(function() {
$( "#tab_example" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tab_example li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
$( "#tab_example" ).tabs({
event: "mouseover"
});
});
</script>
<style>
#tab_example{width: 1000px; margin: 0 auto;}
.ui-tabs-vertical { width: 55em;background:#DAE9C5; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li {background:#DAE9C5; clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block;width:100%; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; background:#4F6828;color:#FFFFFF;}
.ui-tabs-vertical .ui-tabs-panel { padding: 0.9em; float: left; width: 40em;background:#DAE9C5}
</style>
</head>
<body>
<div id="tab_example">
<ul id="navBar">
<li data-submenu-id="t1"><a href="#t1">Tab 1</a></li>
<li data-submenu-id="t2"><a href="#t2">Tab 2</a></li>
<li data-submenu-id="t3"><a href="#t3">Tab 3</a></li>
<li data-submenu-id="t4"><a href="#t4">Tab 4</a></li>
</ul>
<div id="t1" class="popover">
<p>This is Tab 1 content</p>
</div>
<div id="t2" class="popover">
<p>This is Tab 2 content</p>
</div>
<div id="t3" class="popover">
<p>This is Tab 3 content</p>
</div>
<div id="t4" class="popover">
<p>This is Tab 4 content</p>
</div>
</div>
</body>
</html>
这很容易做到，你不必使用所有这些插件。只需写下代码即可工作。
我创建了一个看起来与您想要的页面完全相同的页面，但我使用了自己的代码而不是您的代码，它也更容易。
您可以改用jQuery .hover函数。这是我所做工作的链接，您可以通过单击页面下方的链接下载整个教程