jQuery.load（）在錨鏈接的ID檢索頁面的div

我已經在我的導航菜單如下：jQuery.load（）在錨鏈接的ID檢索頁面的div

<ul> 
    <li><a href="#" id="folio1"><img src="img1.jpg" border="0" /></a></li> 
    <li><a href="#" id="folio2"><img src="img2.jpg" border="0" /></a></li> 
</ul>

它調用的jQuery：

<script type="text/javascript"> 
    $("#folio1").click(function() { 
     $('#folioWrap').load('folio1.html'); 
    }); 

    $("#folio2").click(function() { 
     $('#folioWrap').load('folio2.html'); 
    }); 
</script>

這應該更新的div＃ folioWrap，但現在它只是顯示空白。所以，我有兩個問題：

1 - 是否有一個根本問題，我在這裏導致空白頁面加載？

2 - 有沒有一種方法可以編寫jQuery，以便我只需要一個實例，並且可以從錨鏈接傳遞所有信息？這樣我可以有大量的鏈接引用各種頁面，而不是爲每個人創建一個jQuery引用？

來源

2011-01-10 brianrhea

你們是不是要訪問此你的本地計算機上（例如打開一個外部鏈接）？有時候會有安全問題阻止您加載本地文件 – 2011-01-10 15:38:31

不，它與服務器上的源頁面位於同一目錄中 – brianrhea 2011-01-10 15:40:32

它是完整的HTML頁面嗎？用' ...`等等？我建議在啓用XHR請求記錄功能的Chrome開發人員工具中打開它。然後你可以看到它是什麼請求/回來 – 2011-01-10 15:41:51

我想你忘記了jQuery onload事件？

我會做的是創建要與一些CSS類加載AJAX你的錨標記。有可能會是情況下，你不想改變folioWrap內容：

<ul> 
    <li><a href="folio1.html" class="load"><img src="img1.jpg" border="0" /></a></li> 
    <li><a href="folio2.html" class="load"><img src="img2.jpg" border="0" /></a></li> 
</ul> 

<script type="text/javascript"> 
    $(function(){ 
     $("a.load").click(function (e) { 
      e.preventDefault(); 
      $("#folioWrap").load($(this).attr("href")); 
     }); 
    }); 
</script>

來源

2011-01-10 15:45:09 hunter

我認爲你的問題的一部分可能是你在本地機器上運行它（並試圖通過訪問本地文件，這有時會導致問題。另一個原因可能是HTML文件是完整的，引起渲染您的瀏覽器問題（例如，如果它還有另一個head等），你可以通過做只加載你的頁面的部分：

$("#element").load("file.html #divName");

作爲使用ID而不是複製的代碼，你可以這樣做：

$("a").click(function() { 
    $('#folioWrap').load(this.id + '.html'); 
});

來源

2011-01-10 15:40:10

你可以在URL存儲在href屬性：

<ul> 
    <li><a href="folio1.html" id="folio1"><img src="img1.jpg" border="0" /></a></li> 
    <li><a href="folio2.html" id="folio2"><img src="img2.jpg" border="0" /></a></li> 
</ul> 

<script> 
$("#folio1, #folio2").click(function (e) { 
    $('#folioWrap').load($(this).attr("href")); 
    e.preventDefault(); 
}); 
</script>

這具有不破壞標籤式瀏覽的優勢，它仍然禁用了javascript工作。（這兩個「優勢」認爲它看起來並不完全打破了folio1.html或folio2.html出現在他們自己的。）

至於你用load不工作第一個問題，看看jQuery .load() not working in Chrome

來源

2011-01-10 15:42:00 Emmett

jQuery.load（）在錨鏈接的ID檢索頁面的div

回答

相關問題