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>

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

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 load

Answer 2

您可以使用jQuery，这样可以轻松实现：

然后你可以这样做：

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

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

在单击不同按钮时将不同的HTML加载到相同的#Content DIV中

2 个答案: