Javascript 加载需要重新加载

我今天刚开始在我的项目中使用JQuery。不过我在编解码器上把它弄乱了

我在我的网站上使用

.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

。不管怎样，这都是上面提到的同一个问题。这方面的任何帮助都会很好

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

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

});

同样的原则也适用于许多其他事件……表单提交、按键事件、其他鼠标事件、触摸事件等标签中的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");

});

同样的原则也适用于许多其他事件……表单提交、按键事件、其他鼠标事件、触摸事件等
显示这些事件的相应html。@charlietfl还应包括相关的html片段。问题应该是自包含的…演示是很好的补充，尽管显示了相应的html。@charlietfl还应该包括相关的html片段。问题应该是独立的…演示是很好的补充，尽管这两个仍然正常的链接不是问题。我也做过类似的代码工作，我认为是关于路径名“if”语句的。不应该有
%20
那是一个空格。url中的空格太可怕了。使用您的控制台记录实际的路径名
console.log（路径名）
，并查看它实际是什么。应该有一个前导的
/
，这两个仍然正常的链接不是问题。我也做过类似的代码工作，我认为是关于路径名“if”语句的。不应该有
%20
那是一个空格。url中的空格太可怕了。使用您的控制台记录实际的路径名
console.log（路径名）
，并查看它实际是什么。应该有一个前导的
/