jquery - 选项卡内容中的内容自动设置为显示 :none; so not showing

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

Answer 1

似乎您的 tab-divs 中的所有 div 元素都被隐藏了，

即

<div id="#tab2">
<div style="display:none">
</div>
<div style="display:none">
</div>
<div style="display:none">
</div>
.
.
</div>

你可以在你的 JS 代码中添加这一行，在你执行 fadeIn() 之后

$( $(this).attr('href')).find('div').show();

它取消隐藏每一个 div 标签，即所有的 children 和 descendants，所以这个片段只有在没有任何问题的情况下才能使用 -隐藏每一个 div。

而且，在隐藏选项卡内容时，在大多数情况下仅隐藏父 div 就足够了。