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

You can give it a try here，关于这一点的好处是它也会降级很好，它只会显示所有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
选择“selected”元素的两个父项并选择H2标记的html。

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

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

3 个答案: