javascript - JQuery .load 需要重新加载

Question

我今天刚刚开始在我的项目中使用 JQuery。不过，我在 Codecademy 上搞砸了它。

我在我的网站上使用 .load() 函数，因为加载网页稍微快一点，从长远来看对我来说更容易。我的代码有问题，当我单击页面链接时，它会变成空白。然后我必须重新加载才能看到它。这是我的 JQuery:

var pathname = window.location.pathname;
function ChangeUrl(page, url) {
    if (typeof (history.pushState) != "undefined") {
        var obj = { Page: page, Url: url };
        history.pushState(obj, obj.Page, obj.Url);
    } else {
    alert("Browser does not support HTML5.");
  }
}

var main = function() {

    if(pathname === "cards%20gh-pages/index") {
        ChangeUrl("Index", "index");
        $('body').load("index.html #body");
    } else if(pathname === "cards%20gh-pages/nav-drawer") {
        ChangeUrl("Nav-Drawer", "nav-drawer");
        $('body').load("nav-drawer.html #body");
    }

    $('#index-link').click(function() {
        ChangeUrl("Index", "index");
        $('body').load("index.html #body");
    });

    $('#nav-drawer-link').click(function() {
        ChangeUrl("Nav-Drawer", "nav-drawer");
        $('body').load("nav-drawer.html #body");
    });
}

$(document).ready(main);

如果我单击抽屉导航链接，它会转到 xyz/nav-drawer，如果我单击索引链接，它会转到 xyz/index。不管怎样，这都是上面提到的同样的问题。任何有关这方面的帮助都会很好。

这是我的 fiddle :https://jsfiddle.net/ohmvgw19/1/各个文件的 html 部分是相同的。

<div class="container">
        <div class="card header">
            <ul>
                <li><a id="index-link">Horizontal Navigation</a></li>
                <li><a id="nav-drawer-link">Vertical Navigation</a></li>
                <li><a href="color" id="color-link">Color</a></li>
                <li last><a href="tables" id="tabels-link">Tables</a></li>
            </ul>
        </div>
    </div>

Answer 1

href 位于 <a> 中标签是您遇到问题的原因。

当您单击其中一个并且浏览器看到该 href 时，默认行为是加载它理解该 href 的 URL。

因此，当您超越它时，您需要防止这种默认行为。

像点击处理程序这样的事件处理程序不会覆盖默认行为，它只是拦截它，除非被告知取消默认行为，否则将在事件处理程序中的代码完成后发生

试试这个:

$('#nav-drawer-link').click(function(event) {
   // "event" is a complex object with many properties
   event.preventDefault();

   ChangeUrl("Nav-Drawer", "nav-drawer");
   $('body').load("nav-drawer.html #body");

});

同样的原则适用于许多其他事件......表单提交、按键事件、其他鼠标事件、触摸事件等