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

ここで試してみること 。これの良いところは、劣化もよく、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

これは役立つかもしれません。

• クラス マップ ボックスのすべての要素を選択します。
• anon 関数を定義するクリック イベントを追加します。

これは次のことを行います:

• 更新するコンテンツ div を選択し (その名前がわからない)、次の選択をその HTML に割り当てます。
• 「selected」要素の 2 つの親を上に移動し、H2 タグの html を選択します。

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