如何創建垂直對齊選項卡？

能否引導或建議我如何在垂直對齊中爲以下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

如何創建垂直對齊選項卡？

回答

相關問題