加载不同的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