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

能否引导或建议我如何在垂直对齐中为以下HTML内容创建选项卡。如何创建垂直对齐选项卡？

当单击一个选项卡时，例如tab1 [在左栏中]，只有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>

来源

2014-09-01 ARTLoe

遵循文档http://jqueryui.com/tabs/#vertical – charlietfl 2014-09-01 22:56:46

不要'浮法例如：左;'哟你列出部分。另外，在'class ='middle-column''内的'id'上，使用'onclick'事件来改变''block''和''none''之间的'Element.style.display'。 – PHPglue 2014-09-01 22:57:54

最优雅的解决办法是使用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）

来源

2014-09-01 23:22:03 chrana

谢谢你soo !! – ARTLoe 2014-09-03 23:06:59

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

回答

相关问题