Change CSS & Jquery
.box li.visited{
background:gray;
}
.box li.visited a{
color: #ffffff;
}
$('a').click(function(){
$('.box li').removeClass("visited");
$(this).parent().addClass("visited");
});
ul {
list-style-type: none;
}
.box li a {
font-size: 18px;
text-decoration:none;
color: black;
padding-left: 15px;
display: block;
height: 60px;
line-height: 60px;
}
.box li.active {
background-color: #ad2a2a;
font-weight: bold;
color: white;
}
.box li:hover {
background-color: rgba(198, 19, 52, 0.4);
}
.box li {
background-color: #e3e2e2;
margin-bottom: 1px;
position: relative;
transition: .2s;
margin-right: 10px;
}
.box li.visited{
background:gray;
}
.box li.visited a{
color: #ffffff;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<ul class="box">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
</ul>
You just need small tweaks in html and Jquery code, see the code snippet bellow:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<style>
ul {
list-style-type: none;
}
.box li a {
font-size: 18px;
text-decoration:none;
color: black;
padding-left: 15px;
display: block;
height: 60px;
line-height: 60px;
}
.box li.active {
background-color: #ad2a2a;
font-weight: bold;
color: white !important;
}
.box li:hover {
background-color: rgba(198, 19, 52, 0.4);
}
.box li {
background-color: #e3e2e2;
margin-bottom: 1px;
position: relative;
transition: .2s;
margin-right: 10px;
}
a.visited{
color: #ffffff !important;
}
</style>
<ul class="box">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
</ul>
<script>
$('a').click(function(){
$('a').removeClass("visited");
$('a').parents("li").removeClass("active");
$(this).addClass("visited");
$(this).parents("li").addClass("active");
});
</script>
</body>
</html>
Hope it will help you.
remove onclick="this.style.backgroundColor = 'grey';" which is not good practice.
modify css as
a.visited{
color: #ffffff;
background-color:grey;
}
Modify js as
$(document).ready(function(){
$('a').click(function(){
$('a').removeClass("visited");// remove class for all
$(this).addClass("visited");
});
});
My suggestion is to:
1) Toggle the classname .visited on the list item instead of the link, so you can control both the background color of the <li> and the color of the <a> element via CSS;
2) Use event delegation and detect the click event on the .box element just once and avoid to use inline click handlers or several click events (as it happens by $('a').click(...) );
3) Set the specificity of the CSS rules properly: since you defined a black color with
.box li a { }
you need to override the property with a selector whose specificity is at least equal (that’s why a.visited{...} doesn’t work).
document.querySelector('.box').addEventListener('click', function(ev) {
if (ev.target.matches('a')) {
ev.preventDefault();
if (!!document.querySelector('.visited')) {
document.querySelector('.visited').className = '';
}
ev.target.parentNode.classList.add('visited');
}
});
ul {
list-style-type: none;
}
.box li a {
font-size: 18px;
text-decoration:none;
color: black;
padding-left: 15px;
display: block;
height: 60px;
line-height: 60px;
}
.box li.active {
background-color: #ad2a2a;
font-weight: bold;
color: white;
}
.box li:hover {
background-color: rgba(198, 19, 52, 0.4);
}
.box li {
background-color: #e3e2e2;
margin-bottom: 1px;
position: relative;
transition: .2s;
margin-right: 10px;
}
.box li.visited {
background: gray;
}
.box li.visited a {
color: #ffffff;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<ul class="box">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
</ul>
I have the following code in one of my projects. It displays the menu items. What I wanted is that, when someone clicks a link found at the particular list item, the background color of that particular list item should change.
Here I used grey for demo.
When the user clicks another list item, the previously clicked list item should go back to the original color, and the current list item should change into grey color. In addition to this, I wanted the text to change to white color for the currently selected list item.
I tried changing the style for a:visited, but it didn’t work.
Any help would be greatly appreciated.
$('a').click(function(){
$(this).addClass("visited");
});
ul {
list-style-type: none;
}
.box li a {
font-size: 18px;
text-decoration: none;
color: black;
padding-left: 15px;
display: block;
height: 60px;
line-height: 60px;
}
.box li.active {
background-color: #ad2a2a;
font-weight: bold;
color: white;
}
.box li:hover {
background-color: rgba(198, 19, 52, 0.4);
}
.box li {
background-color: #e3e2e2;
margin-bottom: 1px;
position: relative;
transition: .2s;
margin-right: 10px;
}
a.visited {
color: #ffffff;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<ul class="box">
<li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 1</a></li>
<li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 2</a></li>
<li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 3</a></li>
<li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 4</a></li>
<li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 5</a></li>
</ul>
use $(“a”).removeClass(“visited”); before add class line. it will remove all highlighted before assigning new
Great explanation. Works well. Thank you. By the way, how to make the first list element selected with the same highlighting on page load?
It didn’t work. All list items change to grey background on click.
