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.

让垂直标签跨浏览器工作是否令人担忧，还是太琐碎以至于一旦你有了解决方案，发布示例代码似乎不值得?

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 垂直选项卡文档.我试了一下，效果很好.

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屋！