Jquery 显示新div时关闭打开的div

嗨，我是jq/js的新手，我使用hide/show打开/关闭div，它们工作得很好，直到我尝试打开一个已经打开的div，它们最终会重叠

是否有一种方法可以将其设置为在打开新的div之前关闭任何打开的div，或者仅在div首先打开时使用hide

我使用的jQuery是：

<script>
$(document).ready(function() {

    $('.content').hide();

    $("#show-services").click(function () {
          $(".content#services").show("slide", { direction: "right" }, 1000);
    });    


    $("#show-about").click(function () {
          $(".content#about").show("slide", { direction: "right" }, 1000);
    });  


    $("#show-contact").click(function () {
          $(".content#contact").show("slide", { direction: "right" }, 1000);
    });     

    $("#hide-services").click(function () {
          $(".content#services").hide("slide", { direction: "right" }, 1000);
    });

    $("#hide-about").click(function () {
          $(".content#about").hide("slide", { direction: "right" }, 1000);
    });

    $("#hide-contact").click(function () {
          $(".content#contact").hide("slide", { direction: "right" }, 1000);
    });

});
</script>

$（文档）.ready（函数（）{
$（'.content'）.hide（）；
$（“#显示服务”）。单击（功能（）{
$（“.content#services”）.show（“幻灯片”{方向：“right”}，1000）；
});    
$（“#显示内容”）。单击（函数（）{
$（“.content#about”）.show（“幻灯片”{direction:“right”}，1000）；
});  
$（“#显示联系人”）。单击（功能（）{
$（.content#contact”）.show（“幻灯片”{direction:“right”}，1000）；
});     
$（“#隐藏服务”）。单击（函数（）{
$（.content#services”）.hide（“幻灯片”{direction:“right”}，1000）；
});
$（“#隐藏关于”）。单击（函数（）{
$（“.content#about”）.hide（“幻灯片”{direction:“right”}，1000）；
});
$（“#隐藏联系人”）。单击（函数（）{
$（“.content#contact”）.hide（“幻灯片”{direction:“right”}，1000）；
});
});

作为参考，站点位于其上-如果单击左上角的一个链接，然后单击另一个链接，则可以看到冲突。

切换可能有助于：

或者像这样：

切换有助于：

或者像这样：

在使用

show（）

之前，请在要隐藏以下内容的div上使用

hide（）

：

$("#div1, #div2, #divX").hide(); // hide all these divs
$("#thisDiv").show(); // now show this one

请注意，在使用

show（）

之前，您可以将多个选择器与一个逗号（如“#div1，#div2，#divX”）组合起来，然后在要隐藏的div上使用

hide（）

，例如：

$("#div1, #div2, #divX").hide(); // hide all these divs
$("#thisDiv").show(); // now show this one

---

请注意，您可以使用逗号将多个选择器组合在一起，例如

$（“#div1，#div2，#divX”）

因为所有内容div都有一个“content”类，所以只需在显示当前内容之前用一个内容类隐藏所有div即可

$("#show-services").click(function () {
    $('.content').hide('slide', {direction: 'right'}, 1000);
    $(".content#services").show("slide", { direction: "right" }, 1000);
}); 

---

由于您的所有内容div都有一个“content”类，所以在显示当前div之前，只需隐藏包含一个内容类的所有div即可

$("#show-services").click(function () {
    $('.content').hide('slide', {direction: 'right'}, 1000);
    $(".content#services").show("slide", { direction: "right" }, 1000);
}); 

---

我相信您会发现：visible选择器对此非常有用。 范例

---

在go to selectors:D

中可以找到一个好的、简单的Jquery参考，我相信您会发现：visible selector在这方面非常有用。 范例

---

在go-to选择器中可以找到一个好的、简单的Jquery参考：D

您不必编写这么多的点击处理程序。 在锚定中指定相应的div，例如：href=“#服务”

---

您不必编写那么多单击处理程序。 在锚定中指定相应的div，例如：href=“#服务”

---

@山姆：不客气。顺便说一句，既然你是新来的，你应该看到：@sam：不客气。顺便说一句，既然你是新来的，你应该看到：

$("#links a").click(function(e){
   e.preventDefault();
   whichdiv = $(this).attr("href");
   $('.content').hide('slide', {direction: 'right'}, 1000);
   $(whichdiv).show("slide", { direction: "right" }, 1000);
})