I have a button that activates navigation to a different page.
When this button is clicked, it changes the current section/page's display settings to none and sets the new section/page's display to block.
<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>
JavaScript function below:
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);
};
After pressing the back button, the URL reverts to the old #section, but the CSS properties remain unchanged, leaving the new page still visible and the previous page with display set to none.
How can I ensure that when the back button is pressed, the CSS values reset to their default state?