Switch active item with jQuery
HTML
<ul>
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
<li><a href="#">List item 4</a></li>
<li><a href="#">List item 5</a></li>
</ul>
CSS
ul {
text-align: center;
margin-top: 2em;
}
ul li {
margin-bottom: 50px;
list-style-type: none;
}
ul li a {
text-decoration: none;
font-size: 1.5em;
color: white;
background-color: black;
padding: 20px;
}
.active {
background-color: red;
}
JAVASCRIPT
$("ul li a").on("click", function() {
$(this).parent().siblings().children('a').removeClass('active');
$(this).addClass('active');
});
