保持侧导航对当前网址Javascript开放

Question

我一直在尝试保持我的mySidenav打开，当用户在mySidenav((中选择重定向到新页面时。加载新页面后，我有一个单独的js文件，其中包含一个ready(函数(

$(document).ready(function(){
document.getElementById("myMainNav").classList.add('sideNavOpen');
document.getElementById("main").classList.add('lmarg250');
document.getElementById("mySidenav"+num).classList.add('sideNavOpen');
document.getElementById("main").classList.add('lmarg500');
let span = document.getElementById("open");
if (span.innerHTML === String.fromCharCode(9776).concat(" Open") )
span.innerText = String.fromCharCode(9776);
else
span.innerText = String.fromCharCode(9776).concat(" Open");

});

上面的代码使 myMainNav 保持打开状态，但不会使 mySidenav 保持打开状态。我假设由于它不知道值 +num 是什么，因为页面的 html 链接没有指定它：

<div id="mySidenav2" class="sub-sidenav">
<a onclick="closeSubNavs()" href="javascript:void(0)" class="closebtn2">&times;</a>
<a href="soup.html">Soup</a>
<a href="garlicbread.html">Garlic Bread</a>
<a href="frenchfries.html">French Fries</a>
<a href="loaded.html">Loaded Fries</a>
<a href="ques.html">Quesadilla</a>
<a href="nachos.html">Nachos</a>
<a href="pbagel.html">Pizza Bagel</a>
</div>

有没有办法指定页面或"当前地址/网址？"，这会解决问题，或者给标签一个id="mySidenav2"等。

Answer 1

您可以使用window.location.pathname提取当前页面，并在此基础上逻辑地决定是否应打开侧边栏。

像这样：

if(window.location.path === "/garlicbread.html"){
document.getElementById("mySidenav"+2).classList.add('sideNavOpen');
}

不过，一种更简单的方法可能是将 num 值存储在localStorage对象中并从那里检索它。

// at load:
let num = window.localStorage.getItem('num');
// When saving:
window.localStorage.setItem('num', num);

文档：- 窗口位置 - 窗口本地存储