Jquery - показать / скрыть / переключить несколько DIV - PullRequest
Новая
       1

Jquery - показать / скрыть / переключить несколько DIV

0 голосов
/ 19 августа 2010

Я хочу добиться следующего:

  • Показать 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, я не могу получить правильную комбинацию.* Любые советы высоко ценится, спасибо.

Ответы [ 3 ]

5 голосов
/ 19 августа 2010

Я бы сказал, что ваши якоря должны соответствовать <div id="xxxxx">, с которым они идут, вот так: 

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

Тогда, как бы они ни были завернуты ниже, скажем, что это выглядит так:1005 * 

<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 отключен.

0 голосов
/ 19 августа 2010

Это может помочь, должно:

  • Выбрать все элементы карты классов.
  • добавить событие щелчка, определяющее функцию anon

, который выполняет следующие действия:

  • выберите div содержимого для обновления (не уверен в этом имени) и назначьте следующий выбор для его HTML
  • перейдите к двум родителям элемента selected и выберите HTML-код тега H2.

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

0 голосов
/ 19 августа 2010

У вас может быть пустой div с вами image div. При нажатии на изображение вы можете установить связанный контент как innerHTML для пустого div. 

<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>";
}
...