Javascript 如何在单击时重新加载div内容

我有一个jQuery脚本，可以将内容加载到div中。当您单击菜单项时，内容会加载到contentarea中，URL也会更新。那部分工作得很好。然而，我也希望能够在内容加载到div中后单击div的内部，并在其位置加载另一个页面。例如，表单页面被加载到contentarea中，表单页面内部有一个指向contact us页面的链接。当我点击链接时，我希望表单页面从内容区域中清除，并将联系人页面加载到位。请参见下图：

按照现在设置脚本的方式，仅当我从div外部单击时才会加载内容

以下是我需要修改的代码：

<script type="text/javascript">
//Jquery loader
function getHash() {
    return window.location.hash
}

$("a").on("click", function (e) {

    page = this.href.replace("#", "") + ".html",
        hash = $(this).prop("hash");


    $('#contentarea').load(page, function () {
        if (page.match("home.html")) {
            history.pushState('', document.title, window.location.pathname);
        } else {
            location.hash = hash;
        };



    });

});

//on pageload

history.pushState
var hash = getHash();
if (hash) {
    $("a[href='" + hash + "']").trigger("click");
} else {
    $("a[href='#home']").trigger("click");
}
</script>

---

任何帮助都将不胜感激

由于您使用的是jQuery，我建议：

$(document).ready(function() {
    $(document).on( 'click', 'a', function( e ) {
        $('#contentarea').load( e.target.href );
    });
});

但是，如果您正在创建一个应用程序，并且您正在全局应用它，那么我将重新考虑您的结构，以避免以后对代码进行重大更改。我已经传递了这一点，因为如果页面/状态变量存在，您必须管理它们的状态变量：例如错误、标题、url，以及明显的内容，并确定它们中的哪一个是活动的，或者不传递到下一个页面。然后你必须过滤你不想传播到你的历史状态处理程序的链接，因为你只是不想

在某些情况下，您无法将现有框架应用于您的项目，因为最好的方法是在您的框架上使用它们的代码是的，创建您自己的框架

---

我希望这能帮助你！：

这回答了你的问题吗？