0
Jqueryメニューの目的機能を使ってJquery uiタブを実装しようとしていますが、動作しませんが、それはブートストラップとうまく機能します。誰かがJQueryの垂直UIタブでこの機能を実装しようとしましたか？ plsは私のコードを以下のように助けます。Jqueryメニューの目標機能を持つuiタブ
これは（http://static.tumblr.com/9hgswys/iNYmj8gfd/new-full.gif）Jquery Uiの垂直UIタブを使用して達成したいです。
<!-- 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>
これまでにお試しいただいた内容を表示してください。 –
私は、（https://github.com/kamens/jQuery-menu-を使用して）遅延を追加しようとしていますが、タブを選択しているのに機能していません。 –
誰かが私にこれを助けてもらえますか？ –