同じクラスのdivを表示/非表示

私は4つの画像と4つのdivを持っています。画像1をクリックすると、div 1が表示され、他はすべて非表示になります。各divは同じクラス名を持ちます。あなたの完全なマークアップに基づいて同じクラスのdivを表示/非表示

<!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

編集、：

$(".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に異なるIDを付けて使用する$("document.getElementById('specificDivId')").hide();

出典

2011-01-11 13:59:24 niksvp

対応するリンクとターゲットを識別する手段が必要です。

注文された場合は、相対位置を使用することができますが、通常は両方ともにidフィールドを追加して、順序が狂った場合に一致させることができます。

.triggerフィールドはid="trigger-n"（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：一般的に、このアプローチは、構造レイアウトに依存するよりも堅牢で、IDを制限しますか？さらに、karimが言ったように、あなたが正しい構造を作り、あなたの質問に制限をつけることを常に保証しようとする。人々は適切でない方法で答える時間を費やすので、 – Orbling

同じクラスのdivを表示/非表示

答えて

関連する問題