javascript - 如何隐藏除一个以外的所有div并否定之前的js？

Question

所以我遇到的一般问题是我有一组菜单按钮，它们都对隐藏/显示 div 脚本使用react，但我想排除“画廊”按钮。我希望画廊按钮隐藏“容器 div”中的所有 div，因为画廊将位于所有其他 div 之后。我似乎无法想出一个脚本来否定原始显示和隐藏，只隐藏除页眉、菜单、画廊和页脚之外的所有 div。任何帮助将不胜感激。

我把它放在 JSFiddle 上，但脚本似乎并没有像在我的浏览器上那样工作。无论如何，它在这里:

{ http://jsfiddle.net/ej66fknt/

Html:
`<div id= "wrapper">

            <!-- Beginning of soMedia -->
<div id= "soMedia"> 
</div> 
            <!-- Ending of soMedia --> 



            <!-- Beginning of header --> 
<div id= "header"> 
</div>
            <!-- Ending of header --> 




            <!-- Beginning of menuBar --> 
<div id= "menuBar">
            <a href= "#" data-mainContent="home">Home</a>
            <a href= "#" data-mainContent="gallery">Gallery</a>
            <a href= "#" data-mainContent="suppliers">Suppliers</a>
            <a href= "#" data-mainContent="testimonials">Testimonials</a>
            <a href= "#" data-mainContent="process">Process</a>
            <a href= "#" data-mainContent="contact">Contact</a>


</div>
            <!-- Ending of menuBar-->


<!-- Beginning of galleryBG -->
<div id= "galleryBG"-->
<br />
Gallery here.
</div> 
<!-- End of galleryBG --> 


<!-- Beginning of container-->
<div id= "container">



            <!-- Beginning of mainContent -->
    <div id= "mainContent">


        <div id= "home">
        This is content for home. 
        </div>

        <div id= "Suppliers">
        This is content for Suppliers.
        </div>

        <div id= "process">
        This is content for Process.
        </div>

        <div id= "contact">
        This is content for Contact.
        </div>



    </div> 
            <!-- Ending of mainContent -->

            <!-- Beginning of blog -->
    <div id= "blog">
    blog goes here. 
    </div> 
            <!-- Ending of blog -->

</div>            
<!-- End of container-->  

            <!-- Beginning of copyright -->
<div id= "copyright">
</div> 
            <!-- Ending of copyright --> 

</div>
`
CSS:

    @charset "utf-8";
#wrapper {

    min-width: 800px;
    max-width:960px;
    height: auto;
    position:relative;
    margin-left: auto;
    margin-right:auto; 

}
#soMedia {
    width: auto;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
}
#header {
    width: auto;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}
#menuBar {
    width: auto;
    height: 50px;
    text-align: center;
    padding-top: 10px;
}
#menuBar > a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
    padding: 20px;
    border:#CCC 1px solid;
    background:#FFF;
    color: #999;
    margin-right: 10px;
    text-decoration: none;
    -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
#menuBar > a:hover{
    background:#333;
    color:#FFF;
}

#galleryBG {
    width: auto;
    height: 600px;
    z-index: 10px;
    margin-left: auto;
    margin-right: auto;
}

#container {
    width: auto;
    height: 600px;
    z-index: 5000px;
    position: relative;
    top:-600px;
    margin-left: auto;
    margin-right: auto;

}
#container #mainContent {
    width: 800px;
    height: 600px;
    float: left;
    position: relative;
}
#container #mainContent #home {
    width:100%;
    height: 100%;
}
#container #mainContent #Suppliers {
    width:100%;
    height: 100%;
}
#container #mainContent #process {
    width:100%;
    height: 100%;
}
#container #mainContent #contact {
    width:100%;
    height: 100%;
}
#container #blog {
    width: 160px;
    height:600px;
    float: right;
    position: relative;
}
#copyright {
    width: auto;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
}

Javascript:

    $(function(){

    $('#mainContent').children().hide()
    $('#home').fadeIn("Slow");

    $('#menuBar').on('click', 'a', function(){
        $('#mainContent').children().hide();
        var el = $(this).attr('data-mainContent');
        $('#mainContent div#' + el).fadeIn("Slow");

    });

});

Answer 1

你是这个意思吗？您可以使用 if 语句查看单击的按钮是否为“图库”，然后隐藏 #mainContent 中的所有子项:

$(function(){

    $('#mainContent').children().hide()
    $('#home').fadeIn("Slow");

    $('#menuBar').on('click', 'a', function(){
        $('#mainContent').children().hide();
        var el = $(this).attr('data-mainContent');
        if(el == "gallery"){
          $('#mainContent').children().hide()
        }else{
        $('#mainContent div#' + el).fadeIn("Slow");
        }
    });

});

FIDDLE

仅供引用，您的 fiddle 无法正常工作，因为您没有在边栏中加载 jQuery