使用jQuery替換div內容

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"中的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
    });
});

加載后，這將在標題導航中“鏈接化”鏈接，以便為每個鏈接加載內容div，而不必離開頁面。 只要確保每個標題鏈接都具有您要加載的內容的正確href值即可。

Answer 2

$（“＃content”）。replace（“舊頁面”，“新頁面”）;

試試這個。

要么

$（“＃content”）。load（）{location.replace（“您的頁面”）; }

要么

var url =“您的網址”; $ {location）.attr（'href'，url）;

Answer 3

這是你的意思嗎？ 這將從首頁/內容/頁腳頁面加載內容，並在點擊首頁后加載到相應的div中。

$("#home").click(function () {
    $("#mainhead").load("templates/header.html", function (data) { $(this).html(data); });
    $("#content").load("templates/content.html", function (data) { $(this).html(data); });
    $("#footer").load("templates/footer.html", function (data) { $(this).html(data); });
});

Answer 4

$("#div").html("Your content");