使用JQuery的垂直制表符？ [英] Vertical Tabs with JQuery?

问题描述

我想要在页面左侧而不是顶部选项卡。我已经出于其他原因（效果）加载jQuery，所以我更喜欢将jQuery用于另一个UI框架。搜索垂直制表符jquery会产生正在进行中的工作的链接。

I want tabs along the left side of the page instead of across the top. I'm already loading jQuery for other reasons (effects), so I prefer using jQuery to another UI framework. Searches on "vertical tabs jquery" yield links to works-in-progress.

让纵向选项卡在浏览器中运行起来是非常重要的，或者它是如此微不足道，一旦你有了解决方案，发布示例代码似乎不值得吗？ / p>

Is getting Vertical Tabs to work across browsers fraught, or is it so trivial that, once you have a solution, it doesn't seem worthwhile to post example code?

推荐答案

看看 jQuery UI vertical Tabs Docu 。
我试用它，它工作正常。

Have a look at the jQuery UI vertical Tabs Docu. I try out it, it worked fine.

<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.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-selected { 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> 

<script>
    $(document).ready(function() {
        $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
        $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

    });
</script>

这篇关于使用JQuery的垂直制表符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！