javascript - 重新加载浏览器后，使用URL中的#hash保留在导航栏菜单中(Using #hash in the URL to remain in navbar menu after reloading browser)

Question

I have the code below in which I would like the user to remain in the selected navbar menu after reloading the page.

(我有以下代码，希望用户在重新加载页面后保留在选定的导航栏菜单中。)

To achieve this, as recommended in another question, I am trying to use #hash in the URL.

(为了实现这一点，正如另一个问题所建议的那样，我尝试在URL中使用#hash。)

However, this doesn't seem to work.

(但是，这似乎不起作用。)

I was wondering if someone could tell me what I am doing wrong and how to fix it.

(我想知道是否有人可以告诉我我做错了什么以及如何解决。)

PS: If the user closes the browser, the default menu (menu-1) should be shown as it has been coded.

(PS：如果用户关闭浏览器，则应显示默认菜单（菜单1），因为已对其进行了编码。)

Also, I am using SCSS as the CSS preprocessor.

(另外，我正在使用SCSS作为CSS预处理程序。)

In case you find it easier, here is my CodePen : https://codepen.io/fergos2/pen/vYYaRzN

(如果您觉得更简单，这里是我的CodePen ： https : //codepen.io/fergos2/pen/vYYaRzN)

 $(document).ready(function() { // only show menu-1 $('.menu-1').click(function() { if ($('.menu-2, .menu-3').hasClass('active')) { $('.menu-2, .menu-3').removeClass('active'); $('.content-2, .content-3').removeClass('active'); } $('.menu-1').addClass('active'); $('.content-1').addClass('active'); }); // only show menu-2 $('.menu-2').click(function() { if ($('.menu-1, .menu-3').hasClass('active')) { $('.menu-1, .menu-3').removeClass('active'); $('.content-1, .content-3').removeClass('active'); } $('.menu-2').addClass('active'); $('.content-2').addClass('active'); }); // only show menu-3 $('.menu-3').click(function() { if ($('.menu-2, .menu-1').hasClass('active')) { $('.menu-2, .menu-1').removeClass('active'); $('.content-2, .content-1').removeClass('active'); } $('.menu-3').addClass('active'); $('.content-3').addClass('active'); }); }); 

 .container { margin: 0 auto; background-color: #eee; border: 1px solid lightgrey; width: 20vw; height: 90vh; font-family: sans-serif; position: relative; } header { background-color: lightgreen; padding: 5px; text-align: center; text-transform: uppercase; } .bottom-navbar { position: absolute; bottom: 0; width: 100%; padding: 6px 0; overflow: hidden; background-color: lightgreen; border-top: 1px solid var(--color-grey-dark-3); z-index: 50; display: flex; justify-content: space-between; > a { display: block; color: green; text-align: center; text-decoration: none; font-size: 20px; padding: 0 10px; &.active { color: black; } } } .menu-1.active, .menu-2.active, .menu-3.active { color: black; } .content-1, .content-2, .content-3 { display: none; } .content-1.active, .content-2.active, .content-3.active { display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <header>My header</header> <div class="main-content"> <div class="content-1 active" id="firstPage">House content</div> <div class="content-2" id="secondPage">Map content</div> <div class="content-3" id="thirdPage">Explore content</div> <div class="bottom-navbar"> <a href="#firstPage" class="menu-1 active"><i class="fa fa-home"></i></a> <a href="#secondPage" class="menu-2"><i class="fa fa-map"></i></a> <a href="#thirdPage" class="menu-3"><i class="fa fa-search"></i></a> </div> </div> 

Thanks in advance for your help!

(在此先感谢您的帮助！)

  ask by Fergo translate from so

Answer 1

等待大神答复