Javascript jquery选项卡内容放置问题

我有一个标签项。这有点不同，因为它是垂直工作的

从功能上讲，它工作得很好。我面临的问题是，如果单击选项卡2或选项卡3，这些选项卡的选项卡项将保留在顶部。以下是快速图像：

您可以看到我选择了选项卡3，选项卡3项显示在顶部。我想要的是Tab项应该保持与Tab相同的级别，所以这里的tab3项应该与tab3一致

我知道这是可能的，CSS在每个选项卡项上提供页边空白。但问题是，列表中可能有100个。对他们每个人来说，给予利润可能是一种痛苦

所以我一直在寻找一个动态的解决方案，使标签项目遵循相关的标签。使用jQuery可以做到这一点吗？我不太擅长jquery，我正在寻求帮助。任何解决方案都将不胜感激

HTML

---

[很抱歉英语不好：

Caleb是对的，更新的JS Fiddle：这是某种正确的说法，但问题是如果选项卡项的内容不同，它将与级别不匹配！比如，如果我在tab项1中有很多东西，然后选择tab2。表项2将下降很多。例子：

$("#content div").css('visibility','hidden'); // Initially hide all content
...
$("#content div:first").css('visibility','visible').hide().fadeIn(); // Show first tab     content
...
$("#content div").css('visibility','hidden'); //Hide all content
...
$(this).attr('href')).css('visibility','visible').hide().fadeIn();

$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    $('#tabs li a').click(function(e) {
        e.preventDefault();
        if ($(this).attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $( $(this).attr('href')).fadeIn(); // Show content for current tab
        }
    });
});

$("#content div").css('visibility','hidden'); // Initially hide all content
...
$("#content div:first").css('visibility','visible').hide().fadeIn(); // Show first tab     content
...
$("#content div").css('visibility','hidden'); //Hide all content
...
$(this).attr('href')).css('visibility','visible').hide().fadeIn();