Question

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

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

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

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

有人可以指示我吗？

非常感谢

Answer 1

如果没有jQueryUI，你可以像这样轻松干净地做一些事情（demo =＆gt; 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，没有用户界面）

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

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

Answer 3

我在没有jquery的纯javascript中找到了这个：

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标签”（当然没有引号）。如果你进行搜索，你会发现上面的那些以及其他一些。

Answer 4

使用jQuery UI找到一个例子

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

如果你看一下这个来源，看起来他们只是在添加一个垂直而非水平定位的类

垂直标签没有jquery ui

4 个答案: