Question

我正在尝试使用Jquery菜单目标功能实现Jquery ui选项卡，但它不起作用，但它适用于bootstrap。有没有人试图在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>

Answer 1

这很容易做到，你不必使用所有这些插件。只需记下代码即可。

我创建的页面看起来与您想要的页面完全相同，但我使用的是自己的代码，而不是您的代码，也更容易。

您可以使用jQuery .hover功能。以下是我所做的link，您可以点击页面下方的链接下载整个教程

带有Jquery菜单目标功能的Jquery ui标签

1 个答案: