Question

我在header.html中有这段代码：

<nav role="navigation">
    <ul class="nav">
        <li><a id="home" href="index.html" class="current">home</a></li>
        <li><a id="about" href="includes/test.html">about</a></li>
        <li><a id="resources" href="#">resources</a></li>
        <li><a id="archive" href="#">archives</a></li>
    </ul>
 </nav>

现在，在index.html加载来自其他文件夹的文件以使用id="header"，id="content"和id="footer"填充div之前，一切似乎都很好。

$(function() {
    $("#mainhead").load("templates/header.html");
    $("#content").load("templates/content.html");
    $("#footer").load("templates/footer.html");
});

我的问题是 - 如何将div id="content"中的内容替换为可以通过单击导航菜单中的链接访问的另一个HTML页面中的内容？

Answer 1

将加载导航的代码更改为此...

$("#mainhead").load("templates/header.html", function() {
    $(this).find(".nav a").on("click", function(e) {
        e.preventDefault();             // stop the link from firing as normal
        $("#content").load(this.href);  // load the file specified by the link
    });
});

这将＆＃34; ajaxify＆＃34;标题导航中的链接在加载后，以便为每个链接加载内容div，而不必离开页面。只需确保每个标题链接都包含您要加载的内容的正确href值。

使用jQuery替换div内容

1 个答案: