带有JQuery的垂直选项卡？

Question

我希望沿页面左侧的选项卡而不是顶部的选项卡。我已经为其他原因（效果）加载jQuery，所以我更喜欢使用jQuery到另一个UI框架。搜索“垂直选项卡jquery”产生链接到正在进行中的作品。

垂直制表符在跨浏览器工作时是否充满了工作量，还是如此微不足道：一旦您有解决方案，发布示例代码似乎不值得？

Answer 1

我不希望垂直标签需要水平标签中的不同Javascript。唯一不同的是用于呈现页面上的标签和内容的CSS。标签的JS通常不会超过显示/隐藏/可能加载内容。

Answer 2

试一下：

http://www.sunsean.com/idTabs/

一看自由标签可能有你需要的。

让我知道你是否找到你喜欢的东西。几个月前，我一直在处理完全相同的问题，并决定自行实施。我喜欢我所做的，但使用标准库可能会很好。

Answer 3

看看Listamatic。选项卡在语义上只是以特定方式设置的项目列表。您甚至不一定需要JavaScript才能使垂直制表符成为Listamatic节目中的各种示例。

Answer 4

我在页面中间创建了一个垂直菜单和标签页。我改变了代码源两个词和我分开设置两个不同的div

菜单：

<div class="arrowgreen"> 
    <ul class="tabNavigation"> 
    <li> <a href="#first" title="Home">Tab 1</a></li> 
    <li> <a href="#secund" title="Home">Tab 2</a></li> 
    </ul> 
</div> 

内容：

<div class="pages"> 
    <div id="first"> 
    CONTENT 1 
    </div> 
    <div id="secund"> 
    CONTENT 2 
    </div> 
</div> 

的代码，是用DIV除了

$(function() { 
    var tabContainers = $('div.pages > div'); 

    $('div.arrowgreen ul.tabNavigation a').click(function() { 
     tabContainers.hide().filter(this.hash).show(); 

     $('div.arrowgreen ul.tabNavigation a').removeClass('selected'); 
     $(this).addClass('selected'); 

     return false; 
    }).filter(':first').click(); 
}); 

Answer 5

看看the jQuery UI vertical Tabs Docu。 我试了一下，它工作正常。

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

Answer 6

另一个选项是利玛窦Bicocchi的jQuery的mb.extruder标签插件： http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

Answer 7

//o_O\\ (Poker Face) i know its late 

只需添加beloww CSS样式

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

已更新！ http://jqueryui.com/tabs/#vertical

Answer 8

超级简单的功能，让您在这里创建自己的标签/手风琴结构：http://jsfiddle.net/nabeezy/v36DF/

bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) { 
     //Dependent on jQuery 
     //PARAMETERS 
     //tabClass: 'the class name of the DOM elements that will be clicked', 
     //tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)', 
     //contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked', 
     //contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)', 
     //MUST call bindSets() after dom has rendered 

     var tabs = $('.' + tabClass); 
     var tabContent = $('.' + contentClass); 
     if(tabs.length !== tabContent.length){console.log('JS bindSets: sets contain a different number of elements')}; 
     tabs.each(function (index) { 
      this.matchedElement = tabContent[index]; 
      $(this).click(function() { 
       tabs.each(function() { 
        this.classList.remove(tabClassActive); 
       }); 
       tabContent.each(function() { 
        this.classList.add(contentClassHidden); 
       }); 
       this.classList.add(tabClassActive); 
       this.matchedElement.classList.remove(contentClassHidden); 
      }); 
     }) 
     tabContent.each(function() { 
      this.classList.add(contentClassHidden); 
     }); 

     //tabs[0].click(); 
    } 
bindSets('tabs','active','content','hidden');