垂直选项卡与JQuery？
我希望沿页面左侧的选项卡而不是顶部的选项卡。 我已经为其他原因（效果）加载jQuery，所以我更喜欢使用jQuery到另一个UI框架。 search“垂直选项卡jquery”产生链接进行中的作品。
是否让垂直制表符跨浏览器工作，或是如此微不足道的，一旦你有一个解决scheme，似乎不值得发布示例代码？
看看jQuery UI垂直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> 试试这里：
http://www.sunsean.com/idTabs/
“自由”选项卡可能会有你所需要的。
如果你find你喜欢的东西，请告诉我。 几个月前，我也遇到了同样的问题，决定自己实施。 我喜欢我所做的，但使用标准库可能会很好。
我在页面中间创build了一个垂直菜单和标签页。 我改变了代码源的两个字，我设置了两个不同的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(); });
//o_O\\ (Poker Face) i know its late
只需添加下面的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>
我不希望垂直制表符从水平制表符需要不同的Javascript。 唯一不同的是用于呈现页面上的标签和内容的CSS。 JS的标签通常不会超过显示/隐藏/可能加载的内容。
另一种select是Matteo Bicocchi的jQuery mb.extruder标签插件： http ://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/
看看Listamatic 。 选项卡在语义上只是以特定方式设置的项目列表。 您甚至不一定需要JavaScript来使垂直制表符成为Listamatic表演中的各种示例。
超级简单的function，可以让你在这里创build自己的标签/手风琴结构： 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');
