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 显示/隐藏来实现，但是从我在 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

​ You can give it a try here，这方面的好处是它也可以很好地降级，如果 JavaScript 被禁用，它会简单地显示所有 div 并向下滚动到用户点击的那个。

Answer 2

你可以有一个空的 div 和你的图像 div。单击图像时，您可以将关联的内容设置为空 div 的 innerHTML。

<div>
<div class="map-box"><h2>London &amp; South East</h2><a href="#"><img     src="/img/map_london.jpg" /></a></div> 
<div id="london" />

function OnImageClicked() 
{
$(london).innerHTML = "<p>content london</p>";
}

Answer 3

这可能会有所帮助，它应该：

• 选择类地图框的所有元素。
• 添加定义匿名函数的点击事件

执行以下操作：

• 选择要更新的内容 div（不确定该名称）并将以下选择分配给它的 HTML
• 向上“selected”元素的两个父元素，选择H2标签的html。

$('.map-box').click(function(){ $('contentDiv').html($(this).parent().parent().find('h2').html())});