1을 제외한 모든 div를 숨기고 이전 js를 무효화하는 방법은 무엇입니까?

Question

그래서 일반적으로 문제는 hide/show div 스크립트에 반응하는 모든 메뉴 버튼이 있지만 "갤러리"버튼을 제외하고 싶다는 것입니다. 갤러리 버튼이 다른 모든 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

참고로 당신이에 jQuery를로드 didnt가 있기 때문에 작업 당신의 바이올린 않네 사이드 바