I have the code below in where I would like the user to remain on the selected menu even after reloading the browser.
(我有以下代码，即使重新加载浏览器后，我仍希望用户保留在所选菜单上。)
I've managed to show the URL of the respective page but not its content.(我设法显示了相应页面的URL，但没有显示其内容。)
For instances, when clicking on menu-2 with id="secondPage", if I reload the page I still see the URL as mywebsite#secondPage.(例如，当单击带有id =“ secondPage”的menu-2时，如果我重新加载页面，我仍然会看到该URL为mywebsite＃secondPage。)
However, it shows the content of menu-1.(但是，它显示菜单1的内容。)
menu-1 is set as the default when the user opens the website for the first time or after having closed the tab/browser.
(当用户第一次打开网站或关闭选项卡/浏览器后，menu-1被设置为默认菜单。)
Even when I removed the class "active" I still did not get the result I am aiming for.(即使我删除了“活动”课程，我仍然没有得到我想要的结果。)
What the solution to this would be?
(解决这个问题的办法是什么？)
Thanks in advance for your help!(在此先感谢您的帮助！)
CodePen with the same code: 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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/> <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>
ask by Fergo translate from so
