显示/隐藏具有相同类的div

时间:2011-01-11 13:55:14

标签: jquery

我有四个图像和四个div。单击图像1时,应显示div 1,其他所有其他项应隐藏,等等。每个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>

3 个答案:

答案 0 :(得分:3)

根据您的完整标记进行编辑:

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

上述解决方案依赖于出现.trigger链接的单元格索引。

Try it here

请参阅:

答案 1 :(得分:1)

为div提供不同的ID并使用$("document.getElementById('specificDivId')").hide();

答案 2 :(得分:0)

您需要一种方法来识别相应的链接和目标。

如果订购了它们,那么您可以使用相对位置,但通常最好将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();
});