javascript - 没有 jquery ui 的垂直选项卡

Question

我不知道我是否来对地方问这个问题。

我正在寻找内容显示在侧面的垂直或侧面标签内容的示例或教程。就像正常的标签内容一样，但这次是横向的(最好是左边的标签)。但即使使用谷歌，似乎也没有关于它的在线信息。因此我迷路了。

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

此外，我不想为此使用 jquery ui。

有人能给我指路吗？

非常感谢

Answer 1

如果没有 jQueryUI，您可以像这样非常简单干净地做一些事情(演示 => 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
});