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

Question

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

3

我有四张图片和四个div。当点击图片1时，div1应该出现并且其他所有的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>

- YBW

3个回答

1

给不同的div分配不同的id，然后使用$("document.getElementById('specificDivId')").hide();。

- niksvp

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();
});

- Orbling

谢谢，但目前修改ID不是一个选项。 - YBW

@YBW：一般来说，这种方法比依赖结构布局更加健壮，那么限制ID有什么作用呢？此外，正如Karim所说，始终要确保您放置了适当的结构并在问题中说明限制条件。因为人们会花时间回答不合适的方式。 - Orbling

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- karim79 · Accepted Answer

根据您提供的完整标记进行编辑：

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

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

在此处尝试：点击这里 参见：