Изменить страницы при нажатии?

Question

У меня есть два html-файла, index.html и page2.html, я хотел бы заменить index.html на page2.html, когда пользователь нажимает кнопку с помощью javascript или JQuery. Я пытаюсь загрузить страницу в тело, но когда я нажимаю кнопку, она делает страницу пустой.

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

module.exports = caloriesTopTab; 

Answer 1

Вы можете использовать глобальную location.replace функции:

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

Хотя это функционально эквивалентно использованию HTML <a> тег с атрибутом HREF «/page2.html», а не с помощью 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); 
     }); 
    } 
}); 

Там нет абсолютно никакой реальной пользы делать, что, хотя (и стоимость более сложной), если только «page2.html» не является частным файлом HTML, который вы собираетесь использовать только для обновления части DOM (с помощью функций jQuery html или text вместо document.write).

Так что, если у вас есть веские основания для введения JavaScript, просто использовать HTML <a> тег, например:

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