没有jQuery UI的垂直标签

Question

我不知道我是否在正确的地方问这个问题。

我正在寻找垂直或侧面选项卡式内容的示例或教程，其中内容出现在侧面。与正常的标签式内容一样，但是这次是横向的（最好是左侧的标签）。但是，即使使用Google，似乎也没有关于它的任何内容。所以我迷路了。

或者我可能不知道这种技术的名称。

此外，我不想使用jquery ui。

有人可以告诉我的方式吗？

非常感谢

Answer 1

没有jQueryUI你凑LD做的东西很简单，干净的就像这样（示范=>http://jsfiddle.net/steweb/zwaBx/）

标记：

<ul id="tabs-titles"> 
    <li class="current"> <!-- default (on page load), first one is currently displayed --> 
     first 
    </li> 
    <li> 
     second 
    </li> 
    <li> 
     third 
    </li> 
</ul> 
<ul id="tabs-contents"> 
    <li> 
     <div class="content">first content first content first content</div> 
    </li> 
    <li> 
     <div class="content">second content</div> 
    </li> 
    <li> 
     <div class="content">third content</div> 
    </li> 
</ul> 

CSS：

#tabs-titles{ 
    float:left; 
    margin-right:10px; 
} 
#tabs-titles li{ 
    cursor:pointer; 
} 
#tabs-titles li.current{ 
    font-weight:bolder; 
} 
#tabs-contents{ 
    background:#F2F2F2; 
    margin-left:100px; 
    padding:5px; 
} 
#tabs-contents li{ 
    display:none; 
} 
#tabs-contents li:first-child{ 
    display:block; /* first one content displayed by default */ 
} 

JS：（简单的jQuery，不UI）

var tabs = $('#tabs-titles li'); //grab tabs 
var contents = $('#tabs-contents li'); //grab contents 

tabs.bind('click',function(){ 
    contents.hide(); //hide all contents 
    tabs.removeClass('current'); //remove 'current' classes 
    $(contents[$(this).index()]).show(); //show tab content that matches tab title index 
    $(this).addClass('current'); //add current class on clicked tab title 
}); 

Answer 2

发现使用jQuery UI

http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html

如果你看看源的例子，好像他们只是将其定位其垂直和水平不是一个

类

Answer 3

下面是许多免费教程之一：Vertical Tabs for jQuery lovers!

Answer 4

我发现这一个在纯JavaScript，没有jquery的：

http://webdevel.blogspot.com/2009/03/pure-accessible-javascript-tabs.html

没有测试它。我还发现这一个不使用jQuery的，但利用HTML5和CSS3：

http://www.my-html-codes.com/javascript-tabs-html-5-css3

看来我对这个话题最成功的搜索词是“纯JavaScript标签”（不带引号，当然）。如果您运行该搜索，您会发现上述内容以及其他一些内容。