我正在构建的网页顶部有两个标签按钮。有两种与按钮相关联的样式,深蓝色表示未选中,浅蓝色表示已选中并可在页面上查看。我遇到的问题是我通过 SO 搜索了一个简单的简单 JS 函数,它可以切换 CSS 样式,而我目前拥有的那个做得很好。我遇到的问题,当你查看页面时你会看到这个问题是两者都以深蓝色背景开始,我只希望名为“概述”的链接之一以浅蓝色 BG 和“特征”链接有深蓝色的BG。单击时,两者都将随页面内容切换。
jQuery
$(function() {
var links = $('.scrollerbtn li a.slt').click(function() {
links.removeClass('active');
$(this).addClass('active');
});
});
HTML
<div class="scrollernav">
<ul class="scrollerbtn">
<li><a class="slt" href="#" id="scroll5load" onclick="changeClass1()">Overview</a></li>
<li><a class="slt" href="#" id="scroll5load2" onclick="changeClass()">Features</a></li>
</ul>
</div>
CSS
.scrollerbtn li a.slt {
display: inline;
color: #FFF;
text-align: center;
background-image: url(../../../images/tabbtnselect.png);
background-repeat: no-repeat;
background-position: center 5px;
width: 130px;
height: 40px;
line-height: 50px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: normal;
text-decoration: none;
margin-right: 10px;
float: left;
margin-left: -30px;
}
.scrollerbtn li a.slt.active {
display: inline;
color: #333;
text-align: center;
background-image: url(../../../images/tabbtn.png);
background-repeat: no-repeat;
background-position: center 5px;
width: 130px;
height: 40px;
line-height: 50px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: normal;
text-decoration: none;
margin-right: 10px;
float: left;
margin-left: -30px;
}
我将如何修改这个?