Javascript jquery fadein和out效果

我设计了一个简单的网页，这里是html代码

<div class="wrap-01">
        <div class="wrap-02">
            <div class="about">
                <p> some content </p>
            </div> <!-- end about page -->

            <div class="contact">
                <p> some content </p>
            </div> <!-- end contact page -->

            <div class="service">
                <p> some content </p>
            </div> <!-- end service page -->

            <div class="quotes">
                <blockquote>
                    <p>“ some quote ” - author - </p>
                </blockquote>

                <blockquote>
                    <p>“ some quote ” - author - </p>
                </blockquote>

                <blockquote>
                    <p>“ some quote ” - author - </p>
                </blockquote>

                <blockquote>
                    <p>“ some quote ” - author - </p>
                </blockquote>
            </div> <!-- end quotes page -->
        </div> <!-- end wrap 02 -->

        <div class="wrap-03">
            <a href="#" class="link-01"> About <br /> <span> some text </span> </a>
            <a href="#" class="link-02"> Contact <br /> <span> some text </span> </a>
            <a href="#" class="link-03"> Service <br /> <span> some text </span> </a>
        </div> <!-- end wrap 03 -->
    </div> <!-- end wrap 01 -->

这是我的jQuery代码

<script type="text/javascript">
    $(document).ready(function(){
        $(".link-01").click(function(){
            $(".about").fadeIn("slow");
            $(".contact").fadeOut("slow");
            $(".service").fadeOut("slow");
            $(".quotes").fadeOut("slow");
        });
    });
    </script>

$（文档）.ready（函数（）{
$（“.link-01”）。单击（函数（）{
美元（“.about”）.fadeIn（“慢”）；
$（“.contact”）.fadeOut（“慢”）；
$（“.service”）。淡出（“慢”）；
$（“.quotes”）.fadeOut（“慢”）；
});
});

所以现在我想按此顺序保留about、contact、service、quotes div，当页面加载quotes div应该首先显示，其他（about、contact、service）应该隐藏，当我单击link-01 about link应该显示，其他（contact、service、quotes）应该使用jQuery fadeIn和fadeOut效果隐藏，所以我想对其他人这样做（链路-02和链路-03）

现在我想知道如何正确地做这件事 这个jQuery代码是错误的还是不正确？ 当我单击链接-01 all wrap-03 getting hide这是为什么？

<script type="text/javascript">
    $(document).ready(function(){
        $(".link-01").click(function(){
            $(".wrap-02 div").hide('slow',function(){
                $(".about").fadeIn("slow");
            });
        });
    });
</script>

$（文档）.ready（函数（）{
$（“.link-01”）。单击（函数（）{
$（“.wrap-02 div”）.hide（'slow'，function（））{
美元（“.about”）.fadeIn（“慢”）；
});
});
});

或者如果你在标记中做了一些改变，你可以对其进行概括

<script type="text/javascript">
 $(".wrap-03 a").click(function(){
    var className = $(this).attr("id");
    $(".wrap-02 div").hide('slow',function(){
            $("."+className).fadeIn("slow");
    });
});
</script>
<div class="wrap-01">
        <div class="wrap-02">
            <div class="about">
                <p> some content </p>
            </div> <!-- end about page -->

            <div class="contact">
                <p> some content </p>
            </div> <!-- end contact page -->

            <div class="service">
                <p> some content </p>
            </div> <!-- end service page -->

            <div class="quotes">

            </div> <!-- end quotes page -->
        </div> <!-- end wrap 02 -->

        <div class="wrap-03">
            <a href="#" id="about" class="link-01"> About <br /> <span> some text </span> </a>
            <a href="#" id="contact" class="link-02"> Contact <br /> <span> some text </span> </a>
            <a href="#" id="service" class="link-03"> Service <br /> <span> some text </span> </a>
        </div> <!-- end wrap 03 -->
</div> 

$（“.wrap-03 a”）。单击（函数（）{
var className=$（this.attr（“id”）；
$（“.wrap-02 div”）.hide（'slow'，function（））{
$（“+className）.fadeIn（“慢”）；
});
});
一些内容

一些内容

一些内容

这里有一个JSFIDLE，其中有一个基于JS和标记的工作示例。您需要调整CSS，我不擅长这一点

选中此项：

<script type="text/javascript">
 $(".wrap-03 a").click(function(){
    var className = $(this).attr("id");
    $(".wrap-02 div").hide('slow',function(){
            $("."+className).fadeIn("slow");
    });
});
</script>
<div class="wrap-01">
        <div class="wrap-02">
            <div class="about">
                <p> some content </p>
            </div> <!-- end about page -->

            <div class="contact">
                <p> some content </p>
            </div> <!-- end contact page -->

            <div class="service">
                <p> some content </p>
            </div> <!-- end service page -->

            <div class="quotes">

            </div> <!-- end quotes page -->
        </div> <!-- end wrap 02 -->

        <div class="wrap-03">
            <a href="#" id="about" class="link-01"> About <br /> <span> some text </span> </a>
            <a href="#" id="contact" class="link-02"> Contact <br /> <span> some text </span> </a>
            <a href="#" id="service" class="link-03"> Service <br /> <span> some text </span> </a>
        </div> <!-- end wrap 03 -->
</div>