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。无论哪种方式，它都是上述相同的问题。任何帮助都会很好。

这是我的小提琴：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

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

当你点击一个并且浏览器看到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");

});

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

JQuery .load需要重新加载

1 个答案: