2

我在正在构建的网站上遇到了一些选项卡式内容的问题。

我有一些选项卡式内容，所有选项卡和功能都可以正常工作，并且显示了一些 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
    }
});
});
4

1 回答 1

0

似乎您的选项卡 div 中的所有 div 元素都被隐藏了，

IE

<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 就足够了。

于 2014-05-29T15:07:31.493 回答