Показать/скрыть divs с тем же классом

У меня есть четыре изображения и четыре div. При щелчке изображения 1 появляется div 1, а все остальные должны быть скрыты и т. Д. Каждый div имеет одно и то же имя класса.Показать/скрыть divs с тем же классом

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<title>Untitled 1</title> 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(window).load(function(){ 
     $(".DataList").hide(); 
     $(".DataList:first").show();  
     $(".trigger").click(function() { 
      $(".DataList").hide(); 
      $(".DataList").eq($(this).index()).show(); 
     }); 
    }); 
</script> 
</head> 

<body> 

<div id="LinkBar"> 
    <table border="0"> 
     <tr> 
      <td> 
       <a class="trigger" href="#"><img src="Package1.gif" /></a> </td> 
      <td> 
       <a class="trigger" href="#"><img src="Package2.gif" /></a> </td> 
     </tr> 
    </table> 
</div> 

<div class="DataList"> 
    <div class="Description"> 
     <ul class="Package"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
     </ul> 
     <div class="Hidden"> 
      1 </div> 
    </div> 
</div> 

<div class="DataList"> 
    <div class="Description"> 
     <ul class="Package"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
     </ul> 
     <div class="Hidden"> 
      2 </div> 
    </div> 
</div> 

</body> 

</html>

источник

2011-01-11 YBW

Edited, на основе вашей полной разметке:

$(".DataList").hide(); 
$(".DataList:first").show(); 
$(".trigger").click(function() { 
    $(".DataList").hide(); 
    $(".DataList").eq($(this).closest("td").index()).show(); 
});

выше решение опирается на индекс ячейки, в которых появляются .trigger ссылки.

Try it here

См:

источник

2011-01-11 13:58:49 karim79

Мои спусковые ссылки в ячейках таблицы, в DIV. Нужно ли мне удалять таблицу и div? – YBW

Вы действительно должны опубликовать свою истинную структуру разметки. Я основывал свой ответ на структуре, которую вы опубликовали, мне нужно будет изменить ее на основе вашей фактической разметки. – karim79

Спасибо, код обновлен. – YBW

Дайте разные идентификаторы div и используйте $("document.getElementById('specificDivId')").hide();

источник

2011-01-11 13:59:24 niksvp

Вам нужен способ определения соответствующих ссылок и целей.

Если они заказываются, то вы можете использовать относительное положение, хотя обычно было бы лучше добавить поля id для обоих, чтобы они могли быть сопоставлены, если они выходят из строя.

Попытка именования всех .trigger полей с id="trigger-n" (п = 1,2,3,4), и .DataList полей с id="DataList-n".

Затем вы можете сопоставить одно с другим, как так:

$('.trigger').click(function() { 
    var cTriggerID = $(this).attr('id').replace(/^.*-(\d+)$/, '$1'); 
    var cDataList = $('#DataList-' + cTriggerID); 
    cDataList.slideToggle(); 
});

источник

2011-01-11 14:03:35 Orbling

Спасибо, но изменение id в данный момент не является опцией. – YBW

@YBW: В целом этот подход более прочный, чем полагаться на структурную компоновку, что ограничивает идентификаторы? Кроме того, как сказал карим, всегда старайтесь, чтобы вы уложили правильную структуру и ограничили государственные ограничения на свой вопрос. Так как люди будут тратить время на то, что это не подходит. – Orbling

Показать/скрыть divs с тем же классом

ответ

Смежные вопросы