Question

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

这是迄今为止我能够整理的JSFiddle：

$('#home-header .service-box li a').click(function() {
    $($(this).attr('href')).css('display', 'block');
});

/*

$("#home-header .service-box li a").click(function(){
    var $name = $(this).text();
    var $activebox = ($("#" + $name).length === 0) ;


    $("#home-header .service-details").not($activebox).hide();
    $("#home-header .service-details").not($activebox).removeClass('active');

    $activebox.toggle();
    $activebox.toggleClass('active');

});

*/

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

谢谢大家的帮助！

钦蒂亚

Answer 1

在您的情况下看到它重叠，因为您从未关闭/隐藏它们。因此JavaScript / JQuery逐行运行。我们将首先关闭/隐藏所有这些$('.service-details').hide(); onclick，然后打开/仅显示当前的那个。

<强> JQuery的

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

更新：

Fiddle : Demo

注意：在演示中，我使用了fadeIn()，因此它具有一些平滑效果。使用像toggle()这样的任何其他东西都是无用的。在显示之前隐藏所有service-details，因此不需要toggle()。

Answer 2

我同意divy3993的答案，但稍微改进一下：

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

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

您可以在此小提琴中看到示例：https://jsfiddle.net/rockmandew/rdhn60mb/6/

Answer 3

如果你想要点击相同的链接，再次关闭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" );
}

这是一个带编辑的jsfiddle，我还添加了一个fadeout，使其不那么跳跃

https://jsfiddle.net/rdhn60mb/21/

切换显示/隐藏锚定的div

3 个答案: