Jquery 预加载内容并在需要时显示

所以我有一些条件：

HTML

<p class='navLink' id='one'> div1 </p>
<p class='navLink' id='two'> div2 </p>
<p class='navLink' id='three'> div3 </p>


<div class='container'> </div>

---

我试图找到一种方法，将所有这些内容都包含到DOM中，并在单击时显示它们。它们都显示在同一区域，占用相同的空间。我一直在玩弄

addClass

和

removeClass

，但我无法让我的头脑围绕这个概念来工作。感谢您的建议。

您可以在默认情况下隐藏您的div，并在单击链接时显示它们

$（'.navLink'）。在（'click'，function（）上{
$（'.hidden div'）.hide（）；
var div_id=$（this.attr（'id'）；
$（“#div-”+div_id）.fadeIn（'slow'）；
});
.hidden div{
显示：无；
}

div1
div2'>
第3部分
第一分区
第二组
第三组
您的问题是？请提供代码片段…问题是它的工作方式与我的工作方式相同，但我想尝试一次加载所有数据，以便显示动画更加平滑。对于提示，这正是我想要的。我会让你知道当我回到我的电脑测试
<div class='div1' id='first'>
    <!--some la here-->
</div>

$( '#one').on( 'click' , function() {

    $( '.container').fadeOut( 'fast' , function(){
        $( this).load( 'getDiv1.php' ) ;
    } ).delay( 500 ).fadeIn( 'slow' ) ;

} ) ;