如何将jQuery UI选项卡设置为垂直?

时间:2012-11-14 09:17:01

标签: jquery jquery-ui

我正在使用jQuery Ui Tab:http://jqueryui.com/tabs/

但是我想像这样设置Tab,我怎么能这样做?

enter image description here

what i tired ishttp://jsfiddle.net/s766A/

1 个答案:

答案 0 :(得分:0)

use this css 
<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>