How can I active status when I click on nav menu? - css

Question

I have a menu including the following li
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>
In this code, home page is actived. But want to enable active status when I click on my News page. How Can I do? Thanks for watching.

Answer 1

Please add Js like:
jQuery(document).ready(function () {
jQuery('.menu li a').click(function () {
//removing the previous selected menu state
jQuery('.menu li').find('a.active').removeClass('active');
//adding the state for this parent menu
jQuery(this).addClass('active');
});
});
a.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>

Answer 2

You can use jQuery to do so, use the script below:
$(document).ready(function () {
$('.menu ul li a').click(function () {
// This will remove active class from other links
$('.menu ul li').find('a.active').removeClass('active');
// This will add active class to the link clicked
$(this).addClass('active');
});
});

Answer 3

Here is code using pure javascript
화이팅!!
function change(elem){
var list = document.querySelectorAll(".menu ul li a");
for (var i = 0; i < list.length; ++i) {
list[i].classList.remove('active');
}
elem.classList.add('active');
}
.active{
color:red;
}
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>ABC</li>
</ul>
</div>

Answer 4

With some JS or JQuery , Add a click event on your links and call a method
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp" click="MyMethod">ABC</li>
</ul>
</div>
and in Jquery(or JS) :
perform this :
YourLinkClicked.removeClass('active');
YourLinkClicked.addClass('active');
Or just look at this link : http://jsfiddle.net/designaroni/E53t9/

Answer 5

Modifying #לבני מלכה's answer to
a) Be a11y
b) Work with frameworks (like svelte)
c) Use events instead of the element itself (better for accessibility).
d) Have JSDoc Comments (for whoever must revise my code when this is old and non-modern).
Here is the HTML markup (pure HTML) :
<div class="navbar">
<ul>
<li><a onclick="change(e)" class="active">Link 1</a></li>
<li><a onclick="change(e)">Link 2</a></li>
</ul>
</div>
Pure JS (w/ JSDoc):
/**
* This function is used in the navbar. It gives styles to the active link.
* #param {Event | Undefined} e Event (click event).
*/
const change = (e) => {
if (!e) e = window.event; // <-- for Chrome <89, Firefox (I forgot versions), and Safari.
// If you have been used to JS for a bit, you may think that {} needs to be used above, but no. In modern JS, this is unnecessary. Of course, for multi-line if statements, you do need the brackets.
let list = document.querySelectorAll(".navbar ul li a");
list.forEach(elem => {
elem.classList.remove("active");
});
// Note the below comment is only if you are using a type checker, if you aren't then you can remove this. (the comment).
// #ts-ignore
e.target.classList.add('active');
}

Answer 6

The best and easy way to do it:
Just listen event on parent of list (ul)
After click find old active element and remove class for it
Set active class for target of event
document.querySelector('ul').addEventListener('click', event => {
// remove old active
document.querySelector('.menu .active').classList.remove('active');
// set new active
event.target.classList.add('active');
})
a {
color: #ccc;
text-decoration: none;
}
.active {
color: blue;
}
<div class="menu">
<ul>
<li><a class="active">Home</a></li>
<li><a>News</a></li>
<li><a>ABC</a></li>
</ul>
</div>

Answer 7

Here is some basic function i use for my current MVC project.
Add this to the master page or shared pages, the js need to run each time the site reload.
and you need to use jquery
$(document).ready(function () {
// the current page url eg /index.jsp
var href = window.location.href.toLowerCase();
$(".menu").find("a").each(function () {
// find the current li that match the current Url
if (href.indexOf($(this).attr("href").toLowerCase()) != -1)
$(this).addClass("active"); // set the current li to active
})
})
.acive{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>