jquery Tab内容放置问题

Question

我有一个Tab项目。这有点不同，因为它垂直工作。 FIDDLE

功能上它运作正常。我面临的问题是如果我点击Tab 2或Tab 3，Tab项目仍保留在顶部。这是快速图像：

您可以看到我选择了标签3 和＆＃34; 标签3项＆＃34;显示它是顶部。我想要的是＆＃34;标签项＆＃34;应与＆＃34; tab＆＃34;保持同一水平所以这里＆＃34; tab3项目＆＃34;应符合＆＃34; tab3＆＃34;。

我知道这是可能的，CSS会在每个标签项上给出上限。但问题是，可能有100个列表。对于他们每个人来说，给予保证金可能会很痛苦。

所以我一直在寻找一个动态的解决方案，以便＆＃34;标签项目＆＃34;按照相关标签。这有可能与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 for tab

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