JQuery - 여러 div 표시/숨기기

Question

"거의"이 작업이 있습니다. 그것도 몇 가지 추가 기능을 추가해야합니다. 이 페이지에는 사용자가 페이지를 열 때 볼 수있는 텍스트가 있습니다. 그런 다음 텍스트와 관련된 여러 개의 "버튼"이 제공됩니다.

esc 버튼을 누르거나 버튼을 클릭했을 때 "서비스"텍스트가 보이게하고 싶습니다.

다음은 코드입니다.

$(document).ready(function() { 
    $(".toggles a").click(function(e) { 
     var id = this.hash; 
      $("#topics div:visible").not(id).fadeOut(function(){ 
      $(id).fadeIn(); 
      }); 
     e.preventDefault(); 
    }); 
$("#topics div:not(#services-copy)").hide(); 
}); 

여기에 마크 업이 있습니다.

<div id="main-content"> 
<div class="toggles"> 
<ul> 
    <li><a href="#archdesign"> <img src="images/whatwedo/archdesign.jpg" /> 
    <span>Architectural Design</span> 
    </a> </li> 
    <li><a href="#landscpdesign"> <img src="images/whatwedo/landscpdesign.jpg" /> 
    <p>Landscape Architecture</p> 
    </a> </li> 
    <li><a href="#lpdesign"> <img src="images/whatwedo/lpdesign.jpg" /> 
    <p>Land Planning</p> 
    </a> </li> 
    <li><a href="#intdesign"> <img src="images/whatwedo/intdesign.jpg" /> 
    <p>Interior Design</p> 
    </a> </li> 
    <li><a href="#gisdesign"> <img src="images/whatwedo/gisdesign.jpg" /> 
    <p>GIS</p> 
    </a> </li> 
</ul> 
</div> 
<div id="topics"> 
<div id="services-copy"> 
<h2>Services</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum. </p> 
</div> 
<div id="archdesign"> 
    <h2>Architectural Design</h2> 
    <br /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum.</p> 
</div> 
<div id="landscpdesign"> 
    <h2>Landscape Architecture</h2> 
    <br /> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum.</p> 
</div> 
<div id="lpdesign"> 
    <h2>Land Planning</h2> 
    <br /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum.</p> 
</div> 
<div id="intdesign"> 
    <h2>Interior Design</h2> 
    <br /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum.</p> 
</div> 
<div id="gisdesign"> 
    <h2>GIS</h2> 
    <br /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum.</p> 
</div> 
</div> 
</div><!-- End of Main-Content --> 

이 페이지는 여기 Problem Page

볼 수 있습니다 어떤 조언, 제안은 진심으로 감상 할 수있다. 그것은

Answer 1

function fader(id) { 
    $("#topics div:visible").not(id).fadeOut(function() { 
     $(id).fadeIn(); 
    }); 
} 

$(document).ready(function() { 
    $(".toggles a").click(function(e) { 
     fader(this.hash); 
     e.stopPropagation(); 
     e.preventDefault(); 
    }); 
    $("body").click(function(e) { 
     fader("#services-copy"); 
    }); 
    $(document).keydown(function(e) { 
     if (e.keyCode == 27) { 
      fader("#services-copy"); 
     } 
    }); 

    $("#topics div:not(#services-copy)").hide(); 
}); 

http://jsfiddle.net/gfzpZ/4/