我想突出显示活动选项卡并在单击其他链接时将其移动
$(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>应用这可能是这可以解决您的问题
ul li a.active {
color:blue;
background:#ccc;
text-decoration: underline;
}
html到这里...
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#" >Services</a></li>
</ul>
Javascript 在这里
document.querySelector("a").addEventListener("click", function () {
this.classList.toggle("active");
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句