Javascript 切换显示/隐藏定位的div

我有一个服务列表及其各自的描述，我已经通过锚链接链接到了这些服务。 在我单击服务名称之前，服务详细信息都是隐藏的。我无法隐藏以前单击的服务，它们是重叠的

这是到目前为止我能够总结的一部分：

注释掉的代码不起作用，但它接近我想要实现的目标

谢谢大家帮助我

---

Cintia

在您的案例中，它是重叠的，因为您从不关闭/隐藏它们。因此，正如JavaScript/JQuery逐行运行一样。我们将首先关闭/隐藏所有$'.service details.hide；单击一次，然后仅打开/显示当前文件

JQuery

更新：

注意：在演示中我使用了fadeIn，所以它有一些平滑效果。此外，使用任何其他类似切换的功能都是无用的。由于在显示之前隐藏了所有服务细节，因此无需切换

---

我同意divy3993的答案，但稍作改进：

$('#home-header .service-box li a').click(function() {
    $('.service-details').hide();
    $($(this).attr('href')).toggle();
});

在这种情况下，切换只是一个更有效的功能

---

您可以在这个小提琴中看到这样的例子：

如果您想点击相同的链接，则再次关闭div。。简单地将其包装在if语句中，检查当前活动选项卡是否与href值具有相同的id。如果是这样的话，就不要主持这个节目

//if the clicked a element's href is not the same as the active elements id
if( $(this).attr('href') != "#"+$(".active").attr( "id" ) ) {

     //remove the current active class
     $('.service-details').removeClass( "active" );

    //fade in the div
    $($(this).attr('href')).fadeIn();

    //add the class active to the div
    $($(this).attr('href')).addClass( "active" );
}

这里是一个带有编辑的JSFIDLE，我还添加了一个淡出，以使其不那个么紧张

---

谢谢大家！越来越近了。我还希望能够点击相同的链接和切换，使其关闭。理想情况下，我还希望能够在页面上的任何位置单击链接外部，并将其关闭。这是我加入的新功能。不起作用的是，当您两次单击同一链接以切换打开/关闭活动类时，打开/关闭切换不起作用。

$('#home-header .service-box li a').click(function() {
    $('.service-details').hide();
    $($(this).attr('href')).toggle();
});

//if the clicked a element's href is not the same as the active elements id
if( $(this).attr('href') != "#"+$(".active").attr( "id" ) ) {

     //remove the current active class
     $('.service-details').removeClass( "active" );

    //fade in the div
    $($(this).attr('href')).fadeIn();

    //add the class active to the div
    $($(this).attr('href')).addClass( "active" );
}