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
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…