2014-11-08 58 views
0

我正在使用jQuery腳本加載nav.html和footer.html。我的問題是當我在Wamp測試我的網站時,沒關係。當我將它加載到我的真實Web服務器時,它不會加載我的徽標。我無法弄清楚爲什麼,也找不到任何東西。無法使用加載函數加載帶有jQuery腳本的圖像

這裏是我的nav.html

<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
<meta content="utf-8" http-equiv="encoding"> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="style.css" async> 
</head> 
<body border="1" style="hight:60, border-bottom: 5px solid cyan; vertical-align: middle;"> 
    <br> 
    <img src="attf.png" width="256px"> 
    <a id="button" href="index.html">Home</a> 
    <a id="button" href="gameserv.html">Game Servers</a> 
    <a id="button" href="comsserv.html">Communication Servers</a> 
    <br> 
    <br> 
</body> 
</html> 

,這裏是我如何加載nav.html到我的網頁。

<head> 
<title></title> 
<link rel="stylesheet" type="text/css" href="style.css" async> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script> 
    $(function(){ 
    $("#nav").load("nav.html"); 
    $("#footer").load("footer.html"); 
    }); 
</script> 
</head> 
<body border="1"> 
<div id="nav"></div> 
<div id="footer"></div> 
</body> 

如果它可以幫助你可以找到我的網站http://attf.us/

+0

你上傳了http://attf.us/afft.png - 目前這是404嗎? – geedubb 2014-11-08 05:49:36

+0

一般來說,這些錯誤是通過打開**開發人員工具**來解決的。在Chrome菜單中,選擇更多工具>開發人員工具。在Safari和Firefox中是類似的東西。這些工具有一個控制檯,用於打印頁面中發現的錯誤。可能由於路徑不正確或忘記上傳,您可能會獲得404(文件未找到)。 – rupps 2014-11-08 05:53:19

+0

使用Firefox我使用FireBug,只需要做F12來打開它。 https://addons.mozilla.org/en-US/firefox/addon/firebug/ – 2014-11-08 05:56:33

回答

0

您正在載入一個完整的HTML頁面在<div>

nav.html不應包含<html>,<head><body>標記。這在<div>標籤中是不正確的。

改變它的東西是這樣的:

<link rel="stylesheet" type="text/css" href="style.css" async> 
<div border="1" style="hight:60, border-bottom: 5px solid cyan; vertical-align: middle;"> 
<br> 
<img src="attf.png" width="256px"> 
<a id="button" href="index.html">Home</a> 
<a id="button" href="gameserv.html">Game Servers</a> 
<a id="button" href="comsserv.html">Communication Servers</a> 
<br> 
<br> 
</div> 

對於樣式表,你可能想看看不同的東西放置在<head><link>標籤,但它可能工作內聯。另一種方法是爲您的CSS使用<style>標記,但這會使其100%內聯,這可能不是您想要的。

+0

好的,我會做一些更正並讓你知道它是如何工作的。也感謝你編輯我的錯誤。 :) – 2014-11-08 05:54:26

+0

我做了更正,只留下身體標記內的所有內容,並在我的Wamp環境中對其進行測試,並且所有內容看起來都一樣。我將新文件移到了Web服務器上,但仍然遇到同樣的問題。 :/ – 2014-11-08 05:58:03

+0

爲了確保緩存不成問題,您可以查看源代碼(右鍵單擊,*在Firefox中查看頁面源代碼) – 2014-11-08 05:59:58

0

感謝亞歷克西斯的信息,以更好的建築習慣。此外geedubbs和rupps指出它可能是一個不好的道路或其他類似的問題。

我想出我的網絡服務器區分大小寫。

謝謝你們,這讓我在圈內跑了大約一個小時。