加載共同頁腳HTML

http://jsfiddle.net/L7kkY/ - 我的jsfiddle加載共同頁腳HTML

我想在我的HTML頁面加載一個共同的頁腳，但它似乎並不奏效。我把我的頁面的主體分成兩列，我認爲這就是爲什麼我不能打電話給我的頁腳加載到正確的區域。

如何從單獨的文件加載頁腳？

<div id="col1"> 
    <div id="footer"> 
     <script type="text/javascript"> 
     //<![CDATA[ 
     $("#col1.footer").load("footer.html"); 
     //]]> 
     </script> 
    </div> 
</div>

其餘代碼可以在jsfiddle上找到，我剪掉了所有不是col1中的頁腳。

來源

2014-03-27 Stormie

這是動態地HTML加載?,或這是在上HTE第一負載的HTML？ – Martijn

而且，爲什麼不使用php：'<？= file_get_contents（「footer.html」）;？>' – Martijn

這是一項任務，我們不允許使用php。 :( – Stormie

$('#col1.footer')與任何元素都不匹配。正確的選擇器是$('#footer')。請確保這個ID只有一個元素。

另外，把<script>後結束標記。在此之前，瀏覽器的DOM尚不知道這些元素。

如果你想班（即幾個頁腳存在），使用此：

<div id="col1"> 
    <div class="footer"> 
    </div> 
</div> 
<script type="text/javascript"> 
$("#col1 .footer").load("footer.html"); 
//  ^--- note the space 
</script>

來源

2014-03-27 18:47:03 Boldewyn

當我使用'$（「＃footer」）。load（「footer.html」）;' 它改變整個頁面爲「最新更新」的空白屏幕 – Stormie

您的HTML有效嗎？未封閉的標籤可能會這樣做 – Boldewyn

是的，所有內容在此之前都進行了驗證並保持不變 – Stormie

你可以做到這一點很容易使用jQuery。只需在您的網頁中添加一次即可。

$(function(){ 
    $("[data-load]").each(function(){ 
     $(this).load($(this).data("load"), function(){ 
     }); 
    }); 
})

現在使用的數據加載任何元素上調用外部HTML文件，其內容你只需要添加行要放在內容的HTML代碼。

例如

<nav data-load="sidepanel.html"></nav> 
<nav data-load="footer.html"></nav>

來源

2014-07-30 17:48:43

加載共同頁腳HTML

回答

相關問題