Javascript 使用JQuery的垂直选项卡？

我希望标签沿着页面的左侧而不是顶部。由于其他原因（效果），我已经在加载jQuery了，所以我更喜欢使用jQuery而不是其他UI框架。在“垂直标签jquery”上搜索会产生指向正在进行的工作的链接

---

让垂直选项卡跨浏览器工作是一件令人担忧的事情，还是因为它太琐碎了，以至于一旦您有了解决方案，似乎就不值得发布示例代码了？

我不认为垂直选项卡需要与水平选项卡不同的Javascript。唯一不同的是页面上显示选项卡和内容的CSS。JS for tabs通常只显示/隐藏/可能加载内容。

请尝试以下操作：

看看“自由”选项卡可能就知道你需要什么了

---

如果你找到你喜欢的东西，请告诉我。几个月前，我研究了完全相同的问题，并决定自己实施。我喜欢我所做的，但使用标准库可能会很好。

看看。选项卡在语义上只是以特定方式设置样式的项目列表。你甚至不需要JavaScript来让垂直标签作为ListaMa秀中的各种例子来工作。

< P>我创建了一个垂直菜单和标签，在页面的中间改变。我更改了源代码中的两个单词，并划分了两个不同的div

菜单：

看一看。 我试过了，效果很好

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

/*垂直选项卡
----------------------------------*/
.ui选项卡垂直{宽度：55em；}
.ui制表符垂直.ui制表符导航{填充：.2em.1em.2em.2em；浮动：左；宽度：12em；}
.ui选项卡垂直.ui选项卡导航{清除：左侧；宽度：100%；边框底部宽度：1px！重要；边框右侧宽度：0！重要；边距：0-1px.2em 0；}
.ui选项卡垂直.ui选项卡导航{显示：块；}
.ui制表符垂直.ui制表符导航li.ui-tabs-选定{底部填充：0；右侧填充：.1em；右侧边框宽度：1px；右侧边框宽度：1px；}
.ui选项卡垂直.ui选项卡面板{填充：1em；浮动：右侧；宽度：40em；}
$（文档）.ready（函数（）{
$（“#tabs”）.tabs（）.addClass（'ui-tabs-vertical ui-helper clearfix'）；
$（“#tabs li”）.removeClass（'ui-corner-top'）.addClass（'ui-corner-left'）；
});

另一个选项是Matteo Bicocchi的jQuery mb。挤出机标签插件：

只需添加以下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>

/*垂直选项卡----------------------------------*/
.ui选项卡垂直{宽度：55em；}
.ui制表符垂直.ui制表符导航{填充：.2em.1em.2em.2em；浮动：左；宽度：12em；}
.ui选项卡垂直.ui选项卡导航{清除：左侧；宽度：100%；边框底部宽度：1px！重要；边框右侧宽度：0！重要；边距：0-1px.2em 0；}
.ui选项卡垂直.ui选项卡导航{显示：块；}
.ui制表符垂直.ui制表符导航li.ui-tabs-选定{底部填充：0；右侧填充：.1em；右侧边框宽度：1px；右侧边框宽度：1px；}
.ui选项卡垂直.ui选项卡面板{填充：1em；浮动：右侧；宽度：40em；}

---

更新

超级简单的功能，允许您在此处创建自己的选项卡/手风琴结构：

---

纳米ABS真的很酷。我将寻找使用它的地方。看起来他的点击事件在a标签上给定的链接已失效。你有新的链接吗？

$(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();
});

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

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

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

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');