垂直标签没有jquery ui

Question

我不知道我是否在适当的地方提出这个问题.

我正在寻找内容出现在侧面的垂直或侧面标签内容的示例或教程.像普通的标签内容一样,但这次是横向(最好是左边的标签).但似乎即使使用谷歌也没有任何关于它的信息.所以我迷路了.

或许我不知道这种技术的名称.

另外,我不想为此使用jquery ui.

有人能告诉我的方式吗？

非常感谢

Answer 1

如果没有jQueryUI,你可以像这样做一些非常简单和干净的东西(demo => 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
});