Question

我有2个链接，具体取决于他们点击哪个链接想要关闭所有其他链接并仅显示该链接的信息。

示例：

<div class="shipping-container">
    <a href="#" class="ups">Show UPS info</a>
    <a href="#" class="fedex">Show Fedex info</a>
    <div class="ups info" style="display:none">the info for ups</div>
    <div class="fedex info" style="display:none">the info for fedex</div>
</div>

任何想法我如何使用Jquery切换单击其中一个链接并隐藏所有其他链接（如果打开）。我只想一次显示一种送货方式的信息。此外，我想要一个用户单击showall的选项，如果可能的话，显示所有这些选项。提前谢谢....

Answer 1

$(".shipping-container a").click(function() {
    $("div.info").hide();
    $("div." + this.className).show();
});

You can try it here.

Answer 2

$(".shipping-container > a.ups").click(function() {
    $(".shipping-container > .info").hide();
    $(".shipping-container > .ups.info").show();
    return false;
});
$(".shipping-container > a.fedex").click(function() {
    $(".shipping-container > .info").hide();
    $(".shipping-container > .fedex.info").show();
    return false;
});
$(".shipping-container > a.showall").click(function() {
    $(".shipping-container > .info").show();
    return false;
});

或者，如果你想要闪亮的动画（以及轻松添加更多运输类型的能力）：

["ups", "fedex"].forEach(function(method) {
    $(".shipping-container > a."+method).click(function() {
        $(".shipping-container > .info:not(."+method+")").slideUp("slow");
        $(".shipping-container > ."+method+".info").slideDown("slow");
        return false;
    });
});
$(".shipping-container > a.showall").click(function() {
    $(".shipping-container > .info").slideDown("slow");
    return false;
});

稍加修改的示例是here。

Answer 3

与上述几乎相同

$(".shipping-container a").click(function() {
    $("div.info").hide().filter("div." + this.className).show();
});

我不知道这是否比重新选择div更有效......它可能是。

此外，如果html是实际的html，您可能希望使用 siblings 等方法：

$(".shipping-container a").click(function() {
    $(this).siblings("div.info").hide().filter("div." + this.className).show();
});

我认为它更快。

jquery隐藏所有打开的div并切换

3 个答案: