Jquery 在其他容器中单击“在锚点上显示隐藏元素”

我需要展示一堆不同的flash横幅。我能想到的最好办法是把它们全部隐藏起来，然后在点击标题时显示出来

<!-- list that holds links -->
<ul id="bannerList" class="list">
    <li>Type
        <ul>
            <li><a href="#">Flash banner1 120x600</a></li>
        </ul>
    </li>

    <li>Other Type
        <ul>
            <li><a href="#">Flash banner2 120x600</a></li>
        </ul>
    </li>
</ul>

<div id="bannerTarget">
    <div class="vert">alpha</div>
    <div class="horiz">one</div>
    <div class="horiz">two</div>
    <div class="horiz">three</div>
    <div class="horiz">four</div>
</div>

#bannerTarget .vert {
width: 120px;
height: 600px;
margin: 0 auto;
float: left;
display: none;
}

#bannerTarget .horiz {
width: 728px;
height: 90px;
margin: 0 auto;
float: left;
display: none;
}

---

这不起作用…有什么想法吗？

您需要为

div

和如下链接使用通用命名约定：

<ul id="bannerList" class="list">
    <li>Type
        <ul>
            <li><a href="#" id="link-1">Flash banner1 120x600</a></li>
        </ul>
    </li>

    <li>Other Type
        <ul>
            <li><a href="#" id="link-2">Flash banner2 120x600</a></li>
        </ul>
    </li>
</ul>

<div id="bannerTarget">
    <div class="vert" id="div-1">alpha</div>
    <div class="horiz" id="div-2">one</div>
    <div class="horiz" id="div-3">two</div>
    <div class="horiz" id="div-4">three</div>
    <div class="horiz" id="div-5">four</div>
</div>

您也可以在不使用ID的情况下实现相同的功能，但需要保持链接顺序和div顺序相同：

$("ul#bannerList li a").click(function(e) {
    e.preventDefault();
    $('#bannerTarget > div').hide();
    var link_index = $(this).parent().index();
    $('#bannerTarget > div').each(function(){
        if( $(this).index() == link_index ){
            $(this).show();
        }
    });
});

---

几乎。它显示我单击的第一个（标题），但在单击第二个标题时不会更改它们。也就是说，它不会隐藏可见的那个，也不会显示我单击的那个。另外，使用你的第二种方法，有两个头衔（李的）和两个div的，我点击其中一个就会显示第一条横幅。如果我的问题不清楚，我很抱歉，但你似乎完全理解。我真的很感谢你的帮助。所以我可以理解它，而不仅仅是复制和粘贴它，你是说1）隐藏div bannerTarget的所有子对象（明白了）2）获取链接的id并用“link-”替换它，以及破折号后面的数字？然后将该div与相同的id进行匹配并显示？更正Amundo。这样，您就可以保持链接和div之间的一致性，而不必为每个链接重写单独的JS代码。您只需要维护一个通用的命名约定。我将稍后修复我的第二个解决方案，因为使用

index（）

也可以避免ID和类。我在click语句之外添加了这个选项，因此第一个选项是可见的$（'#bannerTarget>div:not（：first child'））.hide（）；您甚至可以在CSS中设置它，这样就不会增加使用的JS数量。因此，您可以在CSS中设置

#bannerTarget>div{display:none；}，#bannerTarget>div:first child{display:block；}

$("ul#bannerList li a").click(function(e) {
    e.preventDefault();
    $('#bannerTarget > div').hide();
    var id = $(this).attr('id').replace('link-','');
    $('#div-'+id).show();
});

$("ul#bannerList li a").click(function(e) {
    e.preventDefault();
    $('#bannerTarget > div').hide();
    var link_index = $(this).parent().index();
    $('#bannerTarget > div').each(function(){
        if( $(this).index() == link_index ){
            $(this).show();
        }
    });
});