I tried solving this first using online resources. I couldn’t manage to figure it out. I’m just looking to make a nav bar’s background colour change when I click on it and it is active once the new page loads.
A couple of solutions that made the most sense to me but I couldn’t figure out how to implement.
Javascript:
// Get the container element
var btnContainer = document.getElementById("myDIV");
// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
jQuery:
<script>
$(document).ready(function () {
$('ul.navbar-nav > li').click(function (e) {
$('ul.navbar-nav > li').css('background-color', 'transparent');
$(this).css('background-color', '#c0c0c0');
});
});
</script>
Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="website.js"></script>
<link rel="stylesheet" type="text/css" href="css.css" />
<title> Why So Serious </title>
</head>
<body>
<header>
<h1><span> Why So Serious</span></h1>
</header>
</body>
<nav class="navbar">
<ul>
<li><a href="goodnews.html">Goodnews</a></li>
<li><a href="sport.html">Sport</a></li>
<li><a href="style.html">Style</a></li>
<li><a href="forum.html">Forum</a></li>
</ul>
</nav>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
h1 {text-align: center;
font-size: 600% ;
font-style: itaic;
background: #33ACFF ;
min-width: 100%;
margin: 0%;
padding: 0%;
}
/* top nav bar style and location */
.navbar ul {
list-style-type: none;
padding: 0%;
margin: 0%;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 3px solid black;
}
/* top nav bar options styling */
.navbar a {
color: black;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
text-transform: uppercase;
}
.navbar a:hover{
background-color: black;
color: white;
}
.navbar .active{
background-color: black;
color:white;
}
.navbar li{
display: inline;
}
Simon Norgrove is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
You need to keep track of which item is active. You can do this by setting an “active” class on an item when it’s clicked. You can do that by adding an event listener to each item.
const navItems = document.querySelectorAll('nav a')
navItems.forEach(item => {
item.addEventListener('click', e => {
item.classList.add('active')
})
})
Once there’s an active class on an element, you can select and style it with css:
a.active {
background-color: ...
}
Seeing as we’re adding the active class on click, we also need to be removing any previously added active classes. We can do this by creating a “clearActiveClass” function and calling it before we set the new active class.
function clearActiveClass () {
navItems.forEach(item => {
item.classList.remove('active')
})
}
See snippet for example:
const navItems = document.querySelectorAll('nav a')
navItems.forEach(item => {
item.addEventListener('click', e => {
clearActiveClass()
item.classList.add('active')
})
})
function clearActiveClass () {
navItems.forEach(item => {
item.classList.remove('active')
})
}nav {
background-color: #333;
display: flex;
justify-content: center;
}
a {
color: #fff;
display: block;
padding: 5px 10px;
text-decoration: none;
}
a:hover {
background-color: rgba(255, 0, 0, 0.5);
}
a.active {
background-color: rgba(255, 0, 0);
}<nav>
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">FAQs</a>
<a href="#">Contact</a>
</nav>
Firstly, in your HTML, you need to include the script tags for jQuery and your JavaScript file.
@nd point I’ve found is that you should place your navigation inside the tag, as is a part of the document body.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<title>Why So Serious</title>
</head>
<body>
<header>
<h1><span>Why So Serious</span></h1>
</header>
<nav class="navbar">
<ul>
<li><a href="goodnews.html">Goodnews</a></li>
<li><a href="sport.html">Sport</a></li>
<li><a href="style.html">Style</a></li>
<li><a href="forum.html">Forum</a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="website.js"></script>
</body>
</html>
Build a script based on adding an ‘active’ class to the link .
$(document).ready(function () {
$('.navbar ul li a').click(function (e) {
$('.navbar ul li a').removeClass('active');
$(this).addClass('active');
});
});
Additionally, style the link in the active position.
CSS:
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
font-size: 600%;
font-style: italic;
background: #33ACFF;
min-width: 100%;
margin: 0%;
padding: 0%;
}
.navbar ul {
list-style-type: none;
padding: 0%;
margin: 0%;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 3px solid black;
}
.navbar a {
color: black;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
text-transform: uppercase;
}
.navbar a:hover {
background-color: black;
color: white;
}
.navbar a.active {
background-color: black;
color: white;
}
.navbar li {
display: inline;
}
Darya Shuhlia is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You can edit your JavaScript and HTML as follows to get the desired functionality of having the navigation bar’s background colour change when a link is clicked and remain active after the new page loads:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="website.js"></script>
<link rel="stylesheet" type="text/css" href="css.css" />
<title>Why So Serious</title>
</head>
<body>
<header>
<h1><span>Why So Serious</span></h1>
</header>
<nav class="navbar">
<ul>
<li><a href="goodnews.html">Goodnews</a></li>
<li><a href="sport.html">Sport</a></li>
<li><a href="style.html">Style</a></li>
<li><a href="forum.html">Forum</a></li>
</ul>
</nav>
<!-- OTHER HTML HERE -->
</body>
</html>
JavaScript:
document.addEventListener("DOMContentLoaded", function() {
var currLoc= window.location.pathname;
// Get all links in the navbar
var links = document.querySelectorAll(".navbar a");
// Loop through each link
links.forEach(function(link) {
// Check if the link's href matches the current page URL
if (link.getAttribute("href") === currLoc) {
// Add 'active' class to the parent list item
link.parentNode.classList.add("active");
}
// Add click event listener to each link
link.addEventListener("click", function() {
// Remove 'active' class from all items
links.forEach(function(item) {
item.parentNode.classList.remove("active");
});
// Add 'active' class to parent
link.parentNode.classList.add("active");
});
});
});
Here’s how you can do it:
The nav links in your HTML lead to different pages or paths. Since each link opens a new page, the active/opened link has to be determined on each page load. So, I’m assuming you have an HTML template/page for each path (goodnews.html, sport.html, style.html, and forum.html) in your project folder.
If not, create them in your project folder, and paste the following HTML code in each of them to see this solution working. You won’t be able to see the result by running this snippet on stackoverflow because it doesn’t allow multiple HTML pages here. You need to run this solution in you local dev environment by adhering to the instructions I’ve written above.
On each link (anchor), I’ve created an ID that matches the page name. Use the following HTML, CSS, and JavaScript code to change the style of the active link. There are more ways to achieve this, but this is what I could come up with, off the top of my mind.
"use strict";
/* JavaScript: */
window.onload = function () {
const navBar = document.querySelector(".navbar");
const path = window.location.pathname.slice(1, -5);
path && navBar.querySelector(`#${path}`).classList.add("active");
};* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
font-size: 600%;
font-style: itaic;
background: #33acff;
min-width: 100%;
margin: 0%;
padding: 0%;
}
/* top nav bar style and location */
.navbar ul {
list-style-type: none;
padding: 0%;
margin: 0%;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 3px solid black;
}
/* top nav bar options styling */
.navbar a {
color: black;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
text-transform: uppercase;
}
.navbar a:hover,
.navbar .active {
background-color: black;
color: white;
}
.navbar li {
display: inline;
}<!-- IMPORTANT: Paste this HTML code into all HTML pages/paths (goodnews.html, sport.html, style.html, forum.html) in your project folder: -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<script src="website.js" defer></script>
<title> Why So Serious </title>
</head>
<body>
<header>
<h1><span> Why So Serious</span></h1>
</header>
<nav class="navbar">
<ul>
<li><a href="goodnews.html" id="goodnews" class="nav-link">Goodnews</a></li>
<li><a href="sport.html" id="sport" class="nav-link">Sport</a></li>
<li><a href="style.html" id="style" class="nav-link">Style</a></li>
<li><a href="forum.html" id="forum" class="nav-link">Forum</a></li>
</ul>
</nav>
</body>
</html>2