加載不同的HTML到相同的#Content DIV點擊不同的按鈕

Question

我有一個菜單有幾個選項，我想知道如何將不同的HTML加載到相同的div（調用#content），具體取決於您按菜單按鈕。

我的菜單此代碼：

<div id="mainmenu"> 
<ul id="menu"> 
<li><a href="#">Accueil</a></li> 
<li><a href="#">Qui suis-je?</a> 
<ul> 
<li><a href="#">Biographie</a></li> 
<li><a href="#">Discographie</a></li> 
</ul> 
</li> 
<li><a href="#">Porfolio</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div> 

什麼我需要做派，例如「index.html的」進div#content當我按下菜單選項「ACCUEIL」？

Answer 1

您可以使用jQuery，這讓這樣的東西很簡單：

然後，你可以這樣做：

$('#content>div').load('index.html'); 

您可以把這個在onclick一些按鈕，或者在其他地方你javascript代碼...

Answer 2

使用jQuery ajax你可以做到這一點

HTML

<div id="mainmenu"> 
    <ul id="menu"> 
     <li><a href="index.php">Accueil</a></li> 
     <li><a href="the url you want to load for this menu">Qui suis-je?</a> 
    <ul> 
</div>​ 

JAVASCRIPT（jQuery的）

​​$(function(){ 
    $('#menu li a').on('click', function(e){ 
     e.preventDefault(); 
     var page_url=$(this).prop('href'); 
     $('#content').load(page_url); 
    }); 
}); 

jQuery load