Question

我在我正在构建的网站上遇到一些Tabbed内容时出现问题。

我有一些标签内容，所有标签和功能都很好，一些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-div中的所有div元素都被隐藏了，

即。

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

执行fadeIn（）

后，可以在JS代码中添加此行

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

它会隐藏每个div标记，即所有子级和后代，因此只有在没有任何问题时才能使用此代码段不隐藏每一个div。

而且，在隐藏选项卡内容时，在大多数情况下隐藏父div是绰绰有余的。

选项卡式内容中的内容自动设置为display：none;所以没有显示

1 个答案: