jquery - 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 被禁用，它会向下滚动到用户点击的那个。

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
• 向上“选定”元素的两个父级并选择 H2 标记的 html。

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