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

Question

我有一个jQuery脚本，可以将内容加载到div中。单击菜单项时，内容将加载到“contentarea”中，并且URL会更新。那部分完美无缺。但是，我还希望能够单击div内部（一旦内容已加载到其中），并在其位置加载另一页。例如，表单页面被加载到contentarea中，在表单页面内部有一个指向联系我们页面的链接。当我点击链接时，我希望从内容区域清除表单页面，并将联系我们页面加载到其位置。见下图：

通过我的脚本现在设置的方式，只有当我从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>

非常感谢任何帮助！

Answer 1

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

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

但是如果您正在创建一个应用程序，并且您正在全局应用它，那么在您的情况下，我会重新考虑您的结构，以避免以后对您的代码进行重大更改。我已经传递了这个，因为你必须管理状态（页面/状态的变量，如果它们存在：如错误，标题，网址和显然内容）并确定它们中的哪些是活动的是否传递到下一页。然后你必须过滤你不希望与你的历史状态处理程序有关的链接，因为你只是不想......

在某些情况下，您不能在项目中应用现有的框架，因为最好的方法是在框架上使用他们的代码（是的，创建自己的框架）。

我希望这可以帮到你！ ：）