javascript 没有 jquery ui 的垂直选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6033290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vertical tabs without jquery ui
提问by Shaoz
I don't know if I'm in the right place to ask this question.
我不知道我问这个问题是否合适。
I'm looking for examples or tutorials of vertical or side tabbed content where contents appear on the side. Like normal tabbed contents but this time sideways (preferably tabs on the left). But it seems that there's not a single thing about it online even using Google. Therefore I'm lost.
我正在寻找内容出现在侧面的垂直或侧面标签内容的示例或教程。像普通的标签内容一样，但这次是横向的（最好是左侧的标签）。但似乎即使使用谷歌，网上也没有任何关于它的事情。因此我迷路了。
Or maybe I don't know the name of this technique.
或者也许我不知道这种技术的名称。
Also I don't want to use jquery ui for this.
我也不想为此使用 jquery ui。
Can someone show me the way please?
有人可以给我指路吗？
Many thanks
非常感谢
回答by stecb
Without jQueryUI you could do something very easy and clean like this (demo => http://jsfiddle.net/steweb/zwaBx/)
如果没有 jQueryUI，你可以像这样做一些非常简单和干净的事情（演示 => http://jsfiddle.net/steweb/zwaBx/）
Markup:
标记：
<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:
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: (simple jQuery, no UI)
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
});
回答by rjb
Here's one of many free tutorials: Vertical Tabs for jQuery lovers!
这是众多免费教程之一：jQuery 爱好者的垂直标签！
回答by VeryThorough
I found this one in pure javascript with no jquery:
我在没有 jquery 的纯 javascript 中找到了这个：
http://webdevel.blogspot.com/2009/03/pure-accessible-javascript-tabs.html
http://webdevel.blogspot.com/2009/03/pure-accessible-javascript-tabs.html
Haven't tested it yet. I also found this one that uses no jquery, but leverages html5 and css3:
还没有测试过。我还发现这个不使用 jquery，但利用 html5 和 css3：
http://www.my-html-codes.com/javascript-tabs-html-5-css3
http://www.my-html-codes.com/javascript-tabs-html-5-css3
It seems my most successful search phrase for this topic is "pure javascript tabs" (without the quotes, of course). You'll find a those above plus some others if you run that search.
似乎我对这个主题最成功的搜索词组是“pure javascript tabs”（当然没有引号）。如果您运行该搜索，您将找到上述内容和其他内容。
回答by fin1te
Found an example using jQuery UI
找到了一个使用 jQuery UI 的例子
http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html
http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html
If you look at the source, it seems like they're just adding a class which positions it vertically and not horizontally
如果您查看源代码，似乎他们只是添加了一个将其垂直放置而不是水平放置的类
