我有一个按钮可以“导航”到一个新页面。为此，该按钮使当前部分/页面的显示设置 = 无，新部分/页面的显示 = 阻止。<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 值重置为默认值？
3 回答
精慕HU
TA贡献1845条经验 获得超8个赞
尝试使用锚标记，以便您的 URL 实际更改（即：将地址更新为 mypage.html#page2）。 然后，您可以将一个函数绑定到 onhashchange，并检查您的页面是否显示良好。
繁华开满天机
TA贡献1816条经验 获得超4个赞
您尚未提供所有 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>
添加回答
举报
0/150
提交
取消