使用jQuery在一个页面站点上切换内容div

我正在一个网站上建立一个投资组合部分，将限制在4个项目。每个项目都有一个可见的图像和说明，以及默认情况下隐藏的详细信息部分

这样做的目的是在单击该项目的链接时，使“详细信息”部分淡入淡出。我有一把工作小提琴，我把它放在一起，但如果已经有一个细节部分可见，你点击另一个链接，就会有一些大块的重叠发生

这是我用来控制每个细节部分的一个片段：

你可以在这里看到小提琴：

有没有更好的方法来实现这一点，从而消除这种滞后？我试着在fadeIn上使用延迟，但也不起作用

---

提前谢谢

您需要在

.fadeOut（）

上使用回调，以下是语法：

$(divToHide).fadeOut(400, function() {
    $(divToShow).fadeIn();
});

只有在可见元素上只调用了一次

fadeOut（）

函数时，这才（顺利）起作用。因此，最好的方法是找到可见的div，并只针对该div，而不是针对所有的

-details

div：

var visibleDiv = $('.nav ~ div').filter(function() { return $(this).is(':visible'); });

那么回调将如下所示：

$(visibleDiv).stop().fadeOut(400, function() {
    $(divToShow).fadeIn();
});

我还添加了

.stop（）

，以防止多个淡入淡出的淡出堆积起来

此外，值得注意的是，这是可行的，而无需为每个链接创建不同的函数。只需使用以下内容：

$('.nav a').click(function(event) {
    var currentElement = $(event.currentTarget);
    var divToShow = $(currentElement).attr('id').replace('link', 'details');
    ....
});

要获取div，您需要从单击的任何链接显示。总之，jQuery看起来像：

$('.nav a').click(function(event) {
    var currentElement = $(event.currentTarget);
    var divToShow = $(currentElement).attr('id').replace('link', 'details');

    var visibleDiv = $('.nav ~ div').filter(function() { return $(this).is(':visible'); });
    if (visibleDiv.length) // if there is a div already visible, fade it out then fade in the target div
    {
        $(visibleDiv).stop().fadeOut(400, function() {
            $('#' + divToShow).fadeIn();
        });
    }
    else $('#' + divToShow).fadeIn(); // fade it in.
});

我还添加了

if

语句，这样在第一个div中就不会延迟衰落

---

。希望这有帮助

一个技巧是使用

position:absolute

，以便

DIV

元素（内容）占据相同的空间并很好地交叉淡入淡出。我还通过使用

className

而不是

id

删除了大量重复的代码

固定JSFIDLE：

可运行代码段：

$（文档）.ready（函数（）{
$（“A”，“.nav”）。单击（函数（）{
var targetId=$（此）.data（“目标”）；
var$targetDiv=$（“#项目-”+targetId+“-详细信息”）；
$（“.project details”）.fadeOut（）；
$targetDiv.fadeIn（）；
});
$（“a.close”）。单击（函数（）{
$（“.project details”）.fadeOut（）；
});
});
div.nav{
利润率：20px0；
}
.项目详情{
位置：绝对位置；
z指数：1；
显示：无；
背景色：黑色；
颜色：白色；
填充：40px；
}
a、 接近{
光标：指针；
背景：白色；
颜色：黑色；
填充：10px；
位置：相对位置；
顶部：-30px；
左：-40px；
}

x
One.Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本。
x
Two.Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本。
x
Three.Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本。
x
Four.Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本。
这是怎么回事：


$（'body'）。在（'click'，'#nav>a'，函数（）{
var detail=$（'#nav details>div:eq（'+$（this.index（）+'））；
detail.sides（）.fadeOut（）.promise（）.done（函数（））{
detail.fadeIn（）；
});
});
$（'body'）。在（'click'，'#nav details.close'，函数（）上{
$（this.parent（）.fadeOut（）；
});
#导航{
利润率：20px0；
}
#导航详细信息>分区{
显示：无；
背景色：黑色；
颜色：白色；
填充：40px；
位置：相对位置；
}
span.close{
光标：指针；
背景：白色；
颜色：黑色；
填充：10px；
位置：绝对位置；
排名：0；
左：0；
}

x
One.Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本。
x
Two.Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本。
x
Three.Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本。
x
Four.Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本。
好吧，首先。如果要对每个元素执行相同的操作，请尝试使用类。（用同样的动作，我的意思是：打开和关闭）

因此，您仍然可以出于一个非常特定的原因使用ID，而将类用于泛型

我试着在不修改html部分的情况下使它更简单。但我建议您将链接和详细信息放入容器中

这里有一个解决方案，我知道它看起来很复杂。。。也许用fadeToggle会更好。但是有必要修改DOM

以下是您的HTML（带有类和数据属性）：

下面是JSFIDLE：


很抱歉回答得太长。
这很有效！唯一不起作用的是我的scroll to anchor（这是一个单独的脚本，我在网站的其余部分都使用它，取自此处：）。每个项目链接都有一个href=“project-1-details”属性，该属性应该会导致滚动定位功能。如果project-1-details已经可见，并且我单击了project-1-link，那么这个滚动到锚定脚本运行良好。但它不会在第一次单击时滚动。我该如何添加这些附加功能？@EricWood我不能不看代码就说。从我头上跳下来，妈
$('.nav a').click(function(event) {
    var currentElement = $(event.currentTarget);
    var divToShow = $(currentElement).attr('id').replace('link', 'details');

    var visibleDiv = $('.nav ~ div').filter(function() { return $(this).is(':visible'); });
    if (visibleDiv.length) // if there is a div already visible, fade it out then fade in the target div
    {
        $(visibleDiv).stop().fadeOut(400, function() {
            $('#' + divToShow).fadeIn();
        });
    }
    else $('#' + divToShow).fadeIn(); // fade it in.
});

<div class="nav">
<a href="#" id="project-1-link" class="project" data-id="1">
    One     
</a>


<a href="#" id="project-2-link"  class="project" data-id="2">
    Two     
</a>


<a href="#" id="project-3-link"  class="project" data-id="3">
    Three  
</a>

<a href="#" id="project-4-link"  class="project" data-id="4">
    Four  
</a>




<div id="project-1-details" class="details">
    <a class="close">x</a>
    <strong>One.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>

<div id="project-2-details"  class="details">
    <a class="close">x</a>
    <strong>Two.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>

<div id="project-3-details"  class="details">
    <a class="close">x</a>
    <strong>Three.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>


<div id="project-4-details"  class="details">
    <a class="close">x</a>
    <strong>Four.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>

$(function(){
    $(".project").on("click", function(){

     // HERE WE TAKE THE NUMBER OF THE ID FROM THE CLICKED OBJECT

     var dataid = $(this).attr("data-id");

     // THEN WE FADE OUT EVERYTHING IS VISIBLE
     $(".details").fadeOut();

     //HERE, WE'LL TAKE THE ONE WE'RE GONNA FADE IN
     setTimeout(function(){
        $("#project-"+dataid+"-details").fadeIn();
     },400)
  });
})