I have created with navbar, I haven't done much web development.
<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li>
<li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li>
<li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li>
<li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li>
<li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li>
<li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li>
<li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li>
</ul>
</div>
</nav>
This navbar is linked to at the top of all other pages to reduce repetition of code. Can someone help me with code so when menu item clicked "active" class is added to li element. This then triggers css.
CSS:
.nav-link.active {
color: white;
}
Thank you
Here is the exact complete code for your requirement in pure JavaScript. Hope it will help
const links = document.querySelectorAll('.nav-link');
if (links.length) {
links.forEach((link) => {
link.addEventListener('click', (e) => {
links.forEach((link) => {
link.classList.remove('active');
});
e.preventDefault();
link.classList.add('active');
});
});
}.nav-link.active {
color: white;
}<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
<button
class="navbar-toggler ml-1"
type="button"
data-toggle="collapse"
data-target="#collapsingNavbar2"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="navbar-collapse collapse justify-content-between align-items-center w-100"
id="collapsingNavbar2"
>
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="index.html">
<strong style="text-transform: uppercase">home</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">
<strong style="text-transform: uppercase">about</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flights.html">
<strong>FLIGHTS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="hotels.html">
<strong>HOTELS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="holidays.html">
<strong>HOLIDAYS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="property.html">
<strong>PROPERTY</strong>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="car_hire.html">
<strong>CAR HIRE</strong>
</a>
</li>
</ul>
</div>
</nav>Use classList and toggle
document.querySelectorAll(".nav-item").forEach((ele) =>
ele.addEventListener("click", function (event) {
event.preventDefault();
document
.querySelectorAll(".nav-item")
.forEach((ele) => ele.classList.remove("active"));
this.classList.add("active")
})
);.active {
color: green;
} <ul class="navbar-nav mx-auto text-center">
<li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">home</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">about</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>FLIGHTS</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>HOTELS</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>HOLIDAYS</strong></a></li>
<li class="nav-item "><a class="nav-link" ><strong>PROPERTY</strong></a></li>
<li class="nav-item active"><a class="nav-link" ><strong>CAR HIRE</strong></a></li>
</ul>Add following code in your JS:
$(".nav-item").click(function() {
$(".nav-item").removeClass("active"); // This will remove active classes from all <li> tags
$(this).addClass("active"); // This will add active class in clicked <li>
});