Question

所以我一般的问题是我有一系列菜单按钮都对hide / show div脚本做出反应，但我想排除“gallery”按钮。我希望画廊按钮隐藏“容器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

FYI你的小提琴不起作用，因为你没有在侧边栏中加载jQuery

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

1 个答案: