Переход страницы

Question

Я пытаюсь применить переход страницы. Это в основном состоит в добавлении класса в div и запуске перехода перед выгрузкой страницы. Это то, что у меня есть.
https://codepen.io/bcrvlh/pen/mddOQLx

window.addEventListener("beforeunload", function(event) { 
$("a").click(function(){
$("bottom-layer").addClass("active");});
});

Вы можете мне помочь? спасибо

Answer 1

HTML

<a href="#">click</a>
<div id="bottom-layer" class="bottom-layer"></div>

JS

window.onload = function(){
  let element = document.getElementById("bottom-layer");
  element.classList.add("active");
};

С jQuery

$(document).ready(function(){
  $('#bottom-layer').addClass('active');
})

Если вы хотитечтобы происходить до выгрузки страницы, вы должны создать функцию для каждого клика и установить тайм-аут, например:

Html

<a onclick = "navigate('place-href-here')"></a>

JS

function navigate(href-received-as-argument){
  let element = document.getElementById("bottom-layer");
  element.classList.add("active");
  setTimeout(function() {
   window.location.href = href-received-as-argument;
  }, 1000);
}