單擊動畫div，將內容加載到div

我正在使用以下jQuery嘗試淡出div，加載HTML頁面，然後淡入。淡入淡出正在工作，但它似乎不是加載HTML，我不太確定我錯過了什麼。第一個功能是嘗試在開始訪問該網站時將我的第一頁加載到div中。單擊動畫div，將內容加載到div

jQuery的

$(document).ready(function() { 

    $("#Content").load("Landing.html"); 

}); 

$(document).ready(function() { 

    $("a").click(function(event){ 
     event.preventDefault(); 
     linkLocation = this.href; 
     $("#Content").fadeOut(500); 
     $("#Content").load("linkLocation"); 
     $("#Content").fadeIn(500); 
    }); 

});

的HTML的基本思想

<ul> 
     <li> 
      <a href="Contact.html">contact</a> 
     </li> 

     <li> 
      <a href="Portfolio.html">portfolio</a> 
     </li> 

     <li> 
      <a href="Services.html">services</a> 
     </li> 

     <li> 
      <a href="About.html">about</a> 
     </li> 

     <li> 
      <a href="Landing.html">home</a> 
     </li>  
    </ul> 

<div id="Content"></div>

感謝您的幫助！

編輯

感謝您的所有建議。我試過了他們每個人，但仍然沒有運氣。我必須錯過一些非常簡單的事情，但我不能看到ATM。

來源

2013-06-19 stupendousman

你檢查了文件的路徑，文件名（例子等）。作爲旁註，您只需要一個文檔就緒功能。 – adeneo

嗨，adeneo，謝謝你的建議！我一直在檢查一遍又一遍，但仍然沒有運氣。此外，FWIW，如果我刪除preventDefault，它會帶我到正確的頁面。 – stupendousman

linkLocation位置是一個變量不是字符串，所以不應該被包含在""

$(document).ready(function() { 

    $("a").click(function(event){ 
     event.preventDefault(); 
     var linkLocation = this.href; 
     $("#Content").fadeOut(500); 
     $("#Content").load(linkLocation); 
     $("#Content").fadeIn(500); 
    }); 

});

來源

2013-06-19 03:16:34

不應該'this.href'是'this.attr（'href'）'？整個事情可以包裝在一個單一的文檔就緒功能。 – rogMaHall

@rogMaHall都可以工作，'this.href'將讀取'this'dom元素的'href'屬性。嘗試http://jsfiddle.net/arunpjohny/J4E4c/1/ –

你的權利，但是'this.href'將檢索完整的目標網址，而'this.attr（'href'）'只會返回寫入的內容標記。這是一個很好的SO線程 - [this.href vs $（this）.attr（'href'）]（http://stackoverflow.com/questions/6977049/this-href-vs-this-attrhref）。不知道OP是否有偏好，但很高興知道:) – rogMaHall

爲了達到最佳效果，你應該鏈的調用，以確保一個是另一個觸發之前完成：

$("#Content").fadeOut(500, function() { 
     $("#Content").load(linkLocation, function() { 
      $("#Content").fadeIn(500) 
     }); 
    });

是的，修正上面建議的鏈接attr問題。

來源

2013-06-19 03:52:33 codetantrik

鏈接電話的好處。我會記住這一點。我試過了，但仍然沒有運氣。也嘗試了鏈接attr建議，並沒有運氣。 – stupendousman

單擊動畫div，將內容加載到div

回答

相關問題