javascript - jquery Tab 内容放置问题

Question

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

在功能上它工作正常。我面临的问题是，如果我单击 Tab 2 或 Tab 3 ，这些选项卡项将保留在顶部。这是快速图片:

您可以看到我选择了tab 3 并且“Tab3 item”显示在顶部。我想要的是“Tab item”应该与“tab”保持在同一级别，所以这里“tab3 item”应该与“tab3”一致。

我知道这可以通过 CSS 在每个选项卡项上提供边距来实现。但问题是，可以有 100 个列表。对于他们每个人来说，提供 margin 都是一种痛苦。

所以我一直在寻找一个动态的解决方案，以便“选项卡项”跟随相关的选项卡。这可能与 jQuery 吗？我不太擅长 jquery，我正在寻求帮助。任何解决方案将不胜感激。

HTML

<div class="tab-content">
    <ul id="tabs">
                <li><a href="#tab1">tab1</a></li>
                <li><a href="#tab2">tab2</a></li>
                <li><a href="#tab3">tab3</a></li>
    </ul>
</div> 

<div id="content">
            <div class="content-item" id="tab1">tab1 Item</div>
            <div class="content-item" id="tab2">tab2 Item</div>
            <div class="content-item" id="tab3">tab3 Item</div>
</div>

标签页的 JS

$(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
        }
    });
});

[抱歉英语不好:)]

Answer 1

$("#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();