时间戳

首页 > 解决方案 > 页面后退按钮不重置css

javascript - 页面后退按钮不重置css

问题描述

我有一个“导航”到新页面的按钮。

为此，该按钮使当前部分/页面的显示设置=无，新部分/页面的显示=块。

<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没有重置，所以新页面仍然可见，前一页仍然显示=无。

我该如何解决这个问题，所以当按下后退按钮时，css 值会重置为默认值？

标签： javascripthtmlcssbrowser

解决方案

你还没有提供所有的html。没有 id 工作，所以部分为空

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>

推荐阅读