如何制作JQuery + CSS Vertical Tabs

Question

我的标签出现问题，Jquery无法正常运行。

我试图创建Verticle选项卡以显示不同的信息，但我的jquery无法运行。

1. 我试图隐藏除第一个之外的所有div。
2. 然后，当单击其中一个选项卡列表时，活动类将添加到其中并从另一个中删除。
3. 最后隐藏所有div并显示被点击的那个。

Click for jsfiddle demo

   $(document).ready(function() {
    tabContent();
})

function tabContent() {
    $('#tabsD div:not(:first)').hide(); 
    $('#tab-container li').click(function(event){
        var id = $(event.target).index();
        $('.active').removeClass('active');
        $(event.target).addClass('active');
        $('#tabsD div').hide().eq(id).show();
    });
}

Answer 1

使用此 -

var id = $(this).index('li');

演示---> http://jsfiddle.net/HjYZ6/6/

Answer 2

无需重新发明轮子：

查找左边的标签＆amp;右侧的标签

http://twitter.github.io/bootstrap/components.html