Select anchor tag with specific href using jQuery
Joe Hart
Purpose
After refreshing the browser, I want the user to stay in the menu/content before the refresh.
question
After refreshing the browser, the content of the specific menu the user was in before the refresh was displayed as active (ie, displayed on the screen). However, the menu icon for that particular content is not showing as active (i.e. it is not showing black).
I'm selecting the anchor element of the current href (where the icon is found)Struggling with (where the user was before the refresh, the same location after the refresh) .
try
$(document).ready(function() {
$('a[class^=menu]').click(function() {
$('a[class^=menu]').removeClass('active');
$('div[class^=content]').removeClass('active');
if($(this).hasClass('menu-1')) {
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
}
if($(this).hasClass('menu-2')) {
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
}
if($(this).hasClass('menu-3')) {
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
}
});
if (window.location.hash.substr(1) != '') {
$('a[class^=menu],div[class^=content]').removeClass('active');
// making the content active
$('#' + window.location.hash.substr(1)).addClass('active');
// making the menu active
$('a[href="' + window.location.hash.substr(1) + '"]').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;
}
.bottom-navbar>a {
display: block;
color: green;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 0 10px;
}
.bottom-navbar>a.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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.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="mywebsite#firstPage" class="menu-1 active"><i class="fa fa-home"></i></a>
<a href="mywebsite#secondPage" class="menu-2"><i class="fa fa-map"></i></a>
<a href="mywebsite#thirdPage" class="menu-3"><i class="fa fa-search"></i></a>
</div>
</div>
</div>Thanks for your help and advice.
prince hernandez
The problem you're having is that you're looking for bugs href.
you are trying to find, a[href="secondPage"]but should bea[href="mywebsite#secondPage"]
I also changed the way you select the class and add it as active. This way is more dynamic.
Note: In the JS file, there is a variable called hash, now it's #secondPageto fake us on the second page, you can change the value, then re-run it and it will select a new active item. You just need to replace hashwith be window.location.hash, I also took it out into a variable so you don't have to call it every time.
// just replace this with "window.location.hash"
const hash = "#secondPage";
$(document).ready(function() {
$('a[class^=menu]').click(function() {
// we remove the active classes.
$('a[class^=menu]').removeClass('active');
$('div[class^=content]').removeClass('active');
// we get the item that was clicked and select the item
// in a dynamic way.
const clickedClass = $(this).attr('class');
const [identifier, number] = clickedClass.split('-')
$(`.${clickedClass}`).addClass('active');
$(`.content-${number}`).addClass('active');
});
const active = hash.substr(1);
if (active != '') {
$('a[class^=menu],div[class^=content]').removeClass('active');
// making the content active
$(`#${active}`).addClass('active');
// making the menu active
$(`a[href="mywebsite#${active}"]`).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;
}
.bottom-navbar>a {
display: block;
color: green;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 0 10px;
}
.bottom-navbar>a.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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.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="mywebsite#firstPage" class="menu-1 active"><i class="fa fa-home"></i></a>
<a href="mywebsite#secondPage" class="menu-2"><i class="fa fa-map"></i></a>
<a href="mywebsite#thirdPage" class="menu-3"><i class="fa fa-search"></i></a>
</div>
</div>
</div>