Question

我有两个html文件，index.html和page2.html，当用户使用javascript或Jquery点击按钮时，我想用index.html替换page2.html。我正在尝试将页面加载到正文中，但是当我单击按钮时，它会使页面变为空白。

function caloriesTopTab(){
  $('#button1').click(function(){
    $("body").load('page2.html');
  });
}

module.exports = caloriesTopTab;

Answer 1

您可以使用全局location.replace功能：

$("#button1").click(function() {
    location.replace("/page2.html");
});

虽然这在功能上等同于使用带有＆＃34; / page2.html"的href属性的HTML <a>标记，并且根本不使用javascript，这样会更简单，因此更好这样做的方式。如果您希望页面在后台加载并且仅在加载时更改DOM，我想您可以使用AJAX请求：

var ajaxRunning = false;
$("#button1").click(function() {
    if (!ajaxRunning) { // don't send two requests at once
        ajaxRunning = true;
        $.ajax("/page2.html", {
            method: "GET",
            dataType: "html"
        }).done(function(html) {
            ajaxRunning = false;
            document.write(html);
        });
    }
});

这样做绝对没有真正的好处（以及更高复杂性的代价），除非＆＃34; page2.html＆＃34;是一个部分HTML文件，您只能用于更新部分DOM（使用jQuery html或text函数，而不是document.write）。

因此，除非您有令人信服的理由介绍javascript，否则请使用HTML <a>标记，如下所示：

<a href="/page2.html">
    <button id="button1">Click me!</button>
</a>

点击更改页面？

1 个答案: