Блог

У меня есть кнопка, которая «переходит» на новую страницу.

Для этого кнопка делает настройки отображения текущего раздела / страницы = нет, а отображение нового раздела / страницы = блок.

 <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-адрес, очевидно, возвращается к старому разделу #, но css не сбрасывается, поэтому новая страница все еще видна, а предыдущая страница по-прежнему отображается = нет.

Как мне обойти это, чтобы при нажатии кнопки «Назад» значения css сбрасывались по умолчанию?

Попробуйте использовать тег привязки, чтобы ваш URL-адрес действительно изменился (т. Е.: обновите адрес до mypage.html#page2). Затем вы можете привязать функцию к onhashchange и проверить, хорошо ли отображается ваша страница.

вы предоставили не весь html. идентификатор не работает, поэтому section равен 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> 

Другой способ сделать это — привязать ваше изменяющееся состояние к истории браузера. Поскольку нет реального способа переопределить кнопку «назад» в браузере, вам придется записать ее в свою историю. Смотрите API истории для HTML5 здесь: https://css-tricks.com/using-the-html5-history-api /

То же самое, что указано выше, также можно сделать с помощью этого плагина: https://code.google.com/archive/p/reallysimplehistory /