使用JQuery的垂直制表符？

Question

我想在页面左侧而不是顶部选项卡.我已经出于其他原因(效果)加载jQuery,所以我更喜欢将jQuery用于另一个UI框架.搜索"垂直制表符jquery"会产生正在进行中的工作的链接.

是否正在使用垂直标签在浏览器中工作,或者它是如此微不足道,一旦你有了解决方案,发布示例代码似乎不值得？

Answer 1

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

Answer 2

试试这里:

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

查看"自由"选项卡可能会满足您的需求.

如果你找到自己喜欢的东西,请告诉我.几个月前我就解决了同样的问题并决定自己实施.我喜欢我所做的,但使用标准库可能会很好.

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

Answer 4

我不认为垂直选项卡需要与水平选项卡不同的 Javascript。唯一不同的是用于在页面上显示选项卡和内容的 CSS。选项卡的 JS 通常只会显示/隐藏/也许加载内容。