保持侧边导航打开当前 url Javascript

Question

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

$(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 link 没有指定它：

<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>

有没有一种方法可以指定页面或者 "current address / url?"，这是否可以解决问题，或者给标签一个 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);

文档： - window.location - window.localStorage

保持侧边导航打开当前 url Javascript

Keeping Side Nav Open to current url Javascript

javascript

sidenav