History.pushState和window.onpopstate在此demo中使用。 您可以使用浏览器按钮来回移动。 但是在刷新页面后,例如“ selected = box-2”是错误404。
是否可以将这些链接添加到.htaccess?
1。 js文件
let boxes = Array.from(document.getElementsByClassName('box'));
function selectBox (id) {
boxes.forEach(b => {
b.classList.toggle('selected', b.id === id);
});
}
boxes.forEach(b => {
let id = b.id;
b.addEventListener('click', e => {
history.pushState({id}, `Selected: ${id}`, `./selected=${id}`)
selectBox(id);
});
});
window.addEventListener('popstate', e => {
selectBox(e.state.id);
});
history.replaceState({id: null}, 'Default state', './');