Page Back 按钮未重置 CSS

Question

我有一个按钮可以“导航”到一个新页面。为此，该按钮使当前部分/页面的显示设置 = 无，新部分/页面的显示 = 阻止。<div class="listLeft"><p class="listItems" onclick="navButtons('work')">work</p><p class="listItems" onclick="navButtons('about')">about</p></div><div class="listRight"><p class="listItems" onclick="navButtons('playground')">playground</p><p class="listItems" onclick="navButtons('contact')">contact</p></div>js下面function navButtons(page) {  let section = document.getElementById(page);  section.setAttribute("class", "visible");    window.location.href = `#${page}page`;  window.scrollTo(0, document.body.scrollHeight);  let pagesArrayCopy = [...pagesArray]  const unselected = pagesArrayCopy.filter(item => item.id !== page);  setTimeout(() => {      unselected.forEach((el, index) => unselected[index].setAttribute("class", "invisible"));      pagesArray = Array.from(pagesNodeList);    }, 500);};当我按下后退按钮时，url 显然变回了旧 #section，但 css 没有重置，因此新页面仍然可见，上一页仍然显示 = none。我该如何解决这个问题，所以当按下后退按钮时，css 值重置为默认值？

Answer 1

另一种方法是将更改状态绑定到浏览器的历史记录。由于没有真正的方法可以覆盖浏览器上的“后退”按钮，因此您必须将其写入历史记录中。

Answer 2

尝试使用锚标记，以便您的 URL 实际更改（即：将地址更新为 mypage.html#page2）。 然后，您可以将一个函数绑定到 onhashchange，并检查您的页面是否显示良好。

Answer 3

您尚未提供所有 HTML。没有 ID 工作，因此部分为 null

function navButtons(page) {

  let section = document.getElementById(page);

  console.log(section)

  section.setAttribute("class", "visible");

  

  window.location.href = `#${page}page`;

  window.scrollTo(0, document.body.scrollHeight);

  let pagesArrayCopy = [...pagesArray]

  const unselected = pagesArrayCopy.filter(item => item.id !== page);

  setTimeout(() => {

      unselected.forEach((el, index) => unselected[index].setAttribute("class", "invisible"));

      pagesArray = Array.from(pagesNodeList);

    }, 500);

};

<div class="listLeft">

   <p class="listItems" onclick="navButtons('work')">work</p>

   <p class="listItems" onclick="navButtons('about')">about</p></div>

   

<div class="listRight">

<p class="listItems" onclick="navButtons('playground')">playground</p>

<p class="listItems" onclick="navButtons('contact')">contact</p></div>