How can I highlight the active tabs and shift it when clicking on another link?
$(function() {
$('.nav ul li').on('click', function() {
$(this).parent().find('li.active').removeClass('active');
$(this).addClass('active');
});
});.nav {
background-color: #510A32;
height: 120px;
background: cover;
margin: 0;
padding: 0;
overflow: hidden;
top: 0;
}
.nav ul {
list-style-type: none;
}
.nav li {
float: left;
padding: 30px 40px 70px 0px;
font-family: Arial;
}
.nav li a {
display: block;
color: #fff;
padding: 14px 16px;
text-decoration: none;
font-weight: bold;
}
.nav ul li:hover a {
color: gold;
}
li.active a {
color: gold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="active"><a id="home" href="#">Home</a></li>
<li><a id="story" href="#">Our Story</a></li>
<li><a id="Menus" href="#">Menus</a></li>
<li><a id="OrderOnline" href="#">Order Online</a></li>
<li><a id="contact" href="#contact">Contact & Reservations</a></li>
</ul>
</div>