Question

我在这个网页的顶部有两个标签按钮我在建筑物的中间。有两种与按钮相关的样式，深蓝色表示未选择，浅蓝色表示已经选择并可在页面上查看。我遇到的问题是我在SO中搜索了一个简单易用的JS函数，它可以切换CSS样式和我目前做得很好的样式。我遇到的问题，当你看到页面时你会看到这个问题，它们都是以深蓝色背景启动的，而我只想要一个名为“概述”的链接以浅蓝色BG和“功能“链接有深蓝色BG。单击时，两者都将切换为页面内容。

web link to page

的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;
}

我该如何修改？

Answer 1

将活动类添加到“概述”标签中。

<ul class="scrollerbtn">                
    <li><a class="slt active" href="#" id="scroll5load" onclick="changeClass1()">Overview</a></li>
    <li><a class="slt" href="#" id="scroll5load2" onclick="changeClass()">Features</a></li>
</ul>

Answer 2

基本上你需要做的是通过点击它来改变活动标签背景图像......？

通过链接点击切换两个元素的CSS样式

2 个答案: