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 工作，因此部分为 nullfunction navButtons(page) {&nbsp; let section = document.getElementById(page);&nbsp; console.log(section)&nbsp; section.setAttribute("class", "visible");&nbsp;&nbsp;&nbsp; window.location.href = `#${page}page`;&nbsp; window.scrollTo(0, document.body.scrollHeight);&nbsp; let pagesArrayCopy = [...pagesArray]&nbsp; const unselected = pagesArrayCopy.filter(item => item.id !== page);&nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; unselected.forEach((el, index) => unselected[index].setAttribute("class", "invisible"));&nbsp; &nbsp; &nbsp; pagesArray = Array.from(pagesNodeList);&nbsp; &nbsp; }, 500);};<div class="listLeft">&nbsp; &nbsp;<p class="listItems" onclick="navButtons('work')">work</p>&nbsp; &nbsp;<p class="listItems" onclick="navButtons('about')">about</p></div>&nbsp; &nbsp;<div class="listRight"><p class="listItems" onclick="navButtons('playground')">playground</p><p class="listItems" onclick="navButtons('contact')">contact</p></div>