Jquery - 显示/隐藏/切换多个DIV

Question

我期待实现以下目标:

• 连续显示5张图像
• 单击图像以显示与该图像相关的内容
• 单击另一个图像以显示相关内容,并隐藏以前的内容

这是我的图像标记:

<div id="maps">

<div class="map-box"><h2>London &amp; South East</h2><a href="#"><img src="/img/map_london.jpg" /></a></div>
<div class="map-box"><h2>South West, Ireland and Wales</h2> <a href="#"><img src="/img/map_south_west.jpg" /></a> </div>    
<div class="map-box"><h2>South Central &amp; Home Counties</h2> <a href="#"><img src="/img/map_south_central.jpg" /></a> </div>     
<div class="map-box"><h2>North England, Northern Ireland &amp; Scotland</h2> <a href="#"><img src="/img/map_north.jpg" /></a> </div>        
<div class="map-box"><h2>Midlands</h2> <a href="#"><img src="/img/map_midlands.jpg" /></a> </div>       

</div>

当用户点击图像时,我想直接在其下方显示DIV的内容.像这样:

<div id="london">
<p>content london</p>
</div>

<div id="south-west">
<p>content south west</p>
</div>      

<div id="south-central">
<p>content south central</p>
</div>          

<div id="north">
<p>content north</p>
</div>      

<div id="midlands">
<p>content midlands</p>
</div>

这显然可以通过jQuery show/hide实现,但是从我在Stack Overflow上看到的所有示例中,我无法获得正确的组合.

任何提示非常感谢,谢谢.

Answer 1

我会给你的主持人一个必须与<div id="xxxxx">他们一起使用,如下:

<a href="#london"><img src="/img/map_london.jpg" /></a>

然后无论它们被包裹在下面,说它看起来像这样:

<div id="areas">
  <div id="london">
    <p>content london</p>
  </div>
  ....
</div>

您可以像这样使用JavaScript:

$(".map-box a").click(function(e) {
  $("#areas div").hide();
  $(this.hash).show();
  e.preventDefault();
});
$("#areas div:not(#london)").hide();  //show only london initially

你可以给它一个尝试在这里,这个美好的部分是它也会降低好,它会简单地显示所有div和向下滚动到一个,如果禁用JavaScript的人点击.