1

編集: 「Front End Buy」によって以下にリストされている例に js を更新しましたが、リンクが機能しなくなりました。元の投稿を編集して、現在使用しているものを表示しました。リンクが機能しなくなった理由は何ですか?

ヘッダーとフッターをフェードさせずに、メイン コンテンツをフェードさせようとしています。以下は私のコードです。以下は、私が設定した私のコードです。ヘッダーに jquery ライブラリへの外部呼び出しがあります。ありがとう

<script>
$(document).ready(function() { 
  var linkLocation = null;
  $("#content").hide().fadeIn(2000);
  $("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#content").fadeOut(1000, function() {
      redirectPage();
    });      
  });
  function redirectPage() {
    window.location = linkLocation;
  }
});
</script>


<body>
<div id="content_wrapper">

    <div id="header">

        <div id="logo"></div>           

        <div id="nav">
            <ul id="nav" class="nav">
                <li id="home"><a href="index.html" title="" class="transition">Home</a></li>            
                <li id="about"><a href="about.html" title="About Us" class="transition">About Us</a></li>
                <li id="contact"><a href="contact.html" title="Contact Us" class="transition">Contact Us</a></li>                   
            </ul>
        </div> 

    <!--End Main Nav-->           

    </div> 
    <!-- End of Content Header -->
    <div id="content">  
    some text etc...
    </div>
    <div id="footer"></div>
</div>
</body>
4

2 に答える 2

0

JS に欠けている重要なものはほとんどありません。#まず、 ID の前に必ず追加してください。2 番目に、リンクの場所の を作成してvariable、2 番目の関数の内容を認識できるようにします。このような：

$(document).ready(function() {
  var linkLocation = null;  // Create a variable for the link location.
  $("#content").hide().fadeIn(2000);
  $("a.transition").click(function(event){
    event.preventDefault(); // prevent the default action from happening.
    linkLocation = this.href;
    $("#content").fadeOut(1000, function() { // on complete, redirect the page.
      redirectPage();
    });      
  });
  function redirectPage() {
    window.location = linkLocation;
  }
});

そのためのCodePenが動作しています。

于 2013-08-11T19:40:46.770 に答える