2012-06-20 51 views
3

我有一個由導航頭div,內容的內容div和僅包含一些靜態信息的頁腳div組成的頁面。將innerhtml替換爲外部頁面

這個想法是,當你點擊標題欄中的內容時,content div會相應地改變它的內容。我想將每個內容元素存儲在自己的文件中,以便於開發。我該如何着手填寫下面我寫的這個magicLoad函數?

我目前沒有使用任何框架(jQuery想到),但我肯定不反對使用一個。如果還有其他的最佳做法,我也很想知道,但我的主要目標是從外部頁面加載。我怎樣才能做到這一點?

下面是我現在設置的基本骨架模型。 (這裏不僅僅是這些,當然3個,但這些都足以傳達出點)。

<html> 
    <script type="text/javascript"> 
    function show(which) { 
     document.getElementById(which).innerHtml = magicLoad(which + ".html"); 
     return false; 
    }  
    function showHome() { show('home'); return false;} // for onload 

    </script> 
    <body> 
    <div id="header"> 
     <a href="javascript:void(0)" onclick="show('home')">HOME</a> | 
     <a href="javascript:void(0)" onclick="show('training')">TRAINING</a> | 
     <a href="javascript:void(0)" onclick="show('audits')">AUDITS</a> 
    </div> 
    <div id="content"> 

    </div> 
    <div id="footer"> 

    </div> 
    </body> 
    <script> window.onload=showHome; </script> 
</html> 
+0

你要找的阿賈克斯。 –

+0

@Truth no,ajax會是異步的。這完全是同步的。如果我想要其他人來控制內容,那麼Ajax將是一個很好的解決方案。 – corsiKa

+0

Ajax可以非常同步。 –

回答

4

使用下面,簡單和直接

$('#which').load('test.html'); 

如果這是未來的參數

$('#'+which).load('test.html'); 
+0

通過語法,我認爲這是JQuery? – corsiKa

+0

是的。它是jQuery – Rab

+0

如果該HTML包含完整的''到''標籤,該怎麼辦?在div –

3

如果你想嵌入另一個網頁中的一個,你應該考慮使用的。 喜歡的東西:

<script type="text/javascript"> 
function show(which) { 
    document.getElementById(which).src=which+".html"; 
    return false; 
}  
function showHome() { show('home'); return false;} // for onload 

</script> 
<iframe id="home"></iframe>