jqueryの効果

Question

をフェードインとアウトは、htmlコードは、私はそれが

@charset "utf-8"; 
/* CSS Document */ 
body{font-family: Arial;} 
.wrap-01{ 
    width: 740px; 
    padding: 20px; 
    margin: auto; 
} 

.about, .contact, .service, .quotes{ 
    height: 350px; 
    width: 700px; 
    background: #fff; 
} 

.wrap-02{ 
    position: relative; 
} 

.wrap-03{ 
    padding-right: 30px; 
    padding-left: 30px; 
} 

.about, .contact, .service{ 
    position: absolute; 
    display: none; 
} 

.about p, .contact p, .service p{ 
    font-size: 15px; 
    padding: 10px 25px 10px 25px; 
    text-align: justify; 
} 

.my-link{ 
    float: left; 
    background: orange; 
    margin-top: 50px; 
    margin-bottom: 0; 
    text-decoration: none; 
    color: #fff; 
    font-size: 20px; 
    padding: 20px 20px 0 20px; 
} 

.link-01{ 
    margin-right: 10px; 
} 

.link-02{ 
    margin-right: 10px; 
    margin-left: 10px; 
} 

.link-03{ 
    margin-left: 10px; 
} 

であり、ここで私のjQueryのコード

あり、ここでコーディングこのHTMLのCSSを書いた

<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 --> 

です

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

これで、ページの読み込み時にこの順序で連絡先、サービス、引用符をdivにする必要がありますdiv shoul dを最初に表示し、他のもの（about、contact、service）を非表示にし、リンク-01をクリックするとリンクが表示され、他のもの（連絡先、サービス、引用符）はjQuery fadeInとfadeOutエフェクトを使用して非表示にする必要がありますその他（リンク02とリンク03）。

今私が知りたいこのことを正しく行うには これはjQueryコードが間違っているか正しくありませんか？ リンクをクリックすると01すべてがwrap-03なぜこれが隠れているのですか？

Answer 1

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

たり、マークアップでいくつかの変化に行けば、あなたはこれを一般化することができ、ここで

<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> 

Answer 2

あなたのJSとマークアップに基づいて作業例でjsFiddleを持っています。あなたはあなたのCSSを調整する必要があります、私はそれではよく分かりません。

これを確認してください：http://jsfiddle.net/nczUN/1/