三重jQuery垂直选项卡

Question

http://jqueryui.com/tabs/#vertical

我需要一个jQuery垂直选项卡UI，它应该包含三列 这可能吗？

请找到我想要实现的截图：

我的代码：JSFiddle Example

<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>Proin elit arcu, rutrum commodo, ...</p>
  </div>
  <div id="tabs-2">
    <h2>Content heading 2</h2>

    <p>Morbi tincidunt, dui sit amet facilisis feugiat, ...</p>
  </div>
  <div id="tabs-3">
    <h2>Content heading 3</h2>

    <p>Mauris eleifend est et turpis...</p>
    <p>Duis cursus. Maecenas ligula eros, ...</p>
  </div>
</div>

CSS：

.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;
}

JS：

 $(function () {
     $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
     $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
 });

Answer 1

因为您在询问是否可能： 是的，有可能。

编辑：你提供的jsfiddle无法正常工作，因为你正在使用jQuery功能而你没有嵌入jquery。