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. 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.
P.S.: If the user closes the browser, the default menu (menu-1) should be shown as it has been coded. Also, I am using SCSS as the CSS preprocessor.
In case you find it easier, here is my 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!