jquery - 单击不同的按钮将不同的 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>

div#content当我在菜单中按下选项“Accueil”时，我需要做什么才能将“index.html”发送到？

Answer 1

使用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 加载

Answer 2

您可以使用jQuery，它使这样的事情变得简单：

然后你可以这样做：

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

您可以将其放在onclick某个按钮上，也可以放在javascript代码中的其他位置...