如何创建垂直对齐的选项卡？答案

【问题标题】：How do I create tabs in vertical alignment?如何创建垂直对齐的选项卡？
【发布时间】：2014-09-02 07:22:03
【问题描述】：

请指导或建议我如何以垂直对齐方式为以下 HTML 内容创建标签。

当一个选项卡被点击时，例如tab1 [in left-column]，只有tab1的内容显示在中间一列。如果我单击 tab2 [在左栏中]，则仅选项卡 2 的内容显示在中间栏中。我怎么能用 CSS & JqueryUI 做到这一点

任何帮助将不胜感激

<div class="left-column">
  <h3>left-column</h3>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">My Discussions</a></li>
      <li><a href="#tabs-2">My Blogs</a></li>
      <li><a href="#tabs-3">My Events</a></li>
    </ul>
  </div>
</div>

<div class="middle-column">
  <h3>middle-column</h3>
  <div id="tabs">
    <div id="tabs-1">
      <h2>My Discussions</h2>
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo.</p>
    </div>
    <div id="tabs-2">
      <h2>My Blogs</h2>
      <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante.</p>
    </div>
    <div id="tabs-3">
      <h2>My events</h2>
        <% if @user.events.any? %>
          <ul><%= render @events %></ul>
        <% end %>
    </div>
  </div>
</div>

【问题讨论】：

按照文档中的示例jqueryui.com/tabs/#vertical
不要float:left; 在你列出的部分。此外，使用onclick 事件将Element.style.display 在'block' 和'none' 之间更改为ids 内的class='middle-column'。

标签： jquery html css jquery-ui

【解决方案1】：

最优雅的解决方案是使用 jQuery（我相信您正在尝试使用）

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Vertical Tabs functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
  });
  </script>
  <style>
  .ui-tabs-vertical { width: 55em; }
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav li { 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; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
  </style>
</head>
<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <h2>Content heading 1</h2>
    <p>Content1</p>
  </div>
  <div id="tabs-2">
    <h2>Content heading 2</h2>
    <p>Content2</p>
  </div>
  <div id="tabs-3">
    <h2>Content heading 3</h2>
    <p>Content 3</p>
  </div>
</div>


</body>
</html>

来源：(http://jqueryui.com/tabs/#vertical)

【讨论】：