Question

我需要展示一堆不同的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，我如何使该函数更实用？我有问题将链接连接到它的相应div

$("ul#bannerList li a").click(function(e) {
    e.preventDefault();
    $parent.addClass("selected").siblings().removeClass("selected");
    var href = $(this).attr('href');
    $href.css("display","block");
});

这不起作用......任何想法？

Answer 1

您需要为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>

然后您的代码变为：

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

您也可以在不使用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();
        }
    });
});

在锚点上显示隐藏元素单击另一个容器

1 个答案: