jquery - タブ付きコンテンツ内のコンテンツは、自動的に display:none; に設定されます。だから見せない

Question

構築中のサイトにある一部のタブ付きコンテンツに問題があります。

タブ付きのコンテンツがいくつかあり、すべてのタブと機能は正常に動作し、一部の HTML 要素は表示されますが、他の要素は表示されません。

ソースを表示すると、表示されていない div がスタイルされていることに気付きましたdisplay:none

私はこれを自分で設定していません。CSSは私には大丈夫ですか？なぜこれを行うのかを訴えませんか？

HTML:

<section class="main_content">
    <!-- <header><h2>Recent Snippets</h2></header> -->
    <ul id="tabs">
        <li><a href="#tab1">Inbox</a></li>
        <li><a href="#tab2">Sent Messages</a></li>
        <li><a href="#tab3">Drafts</a></li>
        <li><a href="#tab4">Contacts</a></li>
    </ul>

    <div id="tabs_content">
        <div id="tab1">
            <header><h2>Inbox</h2></header>

            <article class="inbox_message">
                <div class="inboxavatar60x60">
                <img src="http://placehold.it/60x60"></div>
                <strong>This is a message Subject</strong>
                <p>
                    Lorem ipsum dolor sit amet is simply dummy text of the typesetting industry. Lorem ipsum dolor sit amet.
                </p>

            </article><!-- end aticle.inbox_message -->

        </div><!-- end tab1 -->

        <div id="tab2">
            <header><h2>Sent Messages</h2></header>

        </div><!-- end tab1 -->

        <div id="tab3">
            <header><h2>Drafts</h2></header>

        </div><!-- end tab1 -->

        <div id="tab4">
            <header><h2>Contacts</h2></header>

        </div><!-- end tab1 -->

        </div><!-- end tab_content -->

</section>
<!-- ***** END CONTENT MAINCONT ***** -->

CSS:

#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
margin: 0 10px 0 0;
}
#tabs a {
position: relative;
background: #34495e;
padding: 0 15px;
float: left; 
height: 40px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
font-weight: normal;
color: #fff;
line-height: 38px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#tabs a:hover, #tabs a:hover::after, #tabs a:focus, #tabs a:focus::after {
background-color: #69bd45;
color: #fff;
}
#tabs a:focus {
outline: 0;
}
#tabs #current a {
background: #69bd45;
/*background-image: url('../img/tab_arw.png') center bottom 9px;  */
z-index: 3;
color: #fff;
}
#tabs #current a::after {
background: #69bd45;
z-index: 3;
color: #fff;
}
#tabs_content {
background: #fff; 
padding: 20px 0;
position: relative;
z-index: 2;
}
#tabs_content header h2 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 22px;
font-weight: normal;
color: #fa910a;
margin: 0 0 15px 0;
}


article.inbox_message {
width: 100%;
color: #ff0000;
}
article.inbox_message .inboxavatar60x60 {
width: 60px;
height: 60px;
float: left;
background-color: #647a91;
margin-right: 15px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

JavaScript:

$(document).ready(function() {
$("#tabs_content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#tabs_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{             
    $("#tabs_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
    }
});
});