带有 JQuery 的垂直选项卡？

Posted 2023-05-08

【中文标题】带有 JQuery 的垂直选项卡？

【英文标题】：Vertical Tabs with JQuery?

【发布时间】：2010-10-20 20:38:05

【问题描述】：

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

让垂直选项卡跨浏览器工作是否令人担忧，或者它是如此微不足道，以至于一旦你有了解决方案，似乎就不值得发布示例代码了？

【参考方案1】：

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

【参考方案2】：

在这里试试：

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

看看 Freedom 标签可能有你需要的东西。

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

【讨论】：

Nanotabs 真的很酷。我会寻找使用它的地方。

【参考方案3】：

我创建了一个垂直菜单和在页面中间更改的选项卡。我在代码源上改了两个字，我把两个不同的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();
);

【讨论】：

看起来他的点击事件在 a 标签上

【参考方案4】：

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

只需在下面添加 w 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

【讨论】：

给定的链接已失效。有新链接吗？

【参考方案5】：

我不希望垂直选项卡需要与水平选项卡不同的 javascript。唯一不同的是用于在页面上显示选项卡和内容的 CSS。用于标签的 JS 通常只显示/隐藏/可能加载内容。

【参考方案6】：

另一个选择是 Matteo Bicocchi 的 jQuery mb.extruder tabs 插件： http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

【参考方案7】：

看看Listamatic。选项卡在语义上只是以特定方式设置样式的项目列表。您甚至不一定需要 javascript 来使垂直选项卡像 Listamatic 展会上的各种示例一样工作。

【参考方案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');