1

建物の真ん中にいるこのウェブページの上部に2つのタブボタンがあります。ボタンに関連付けられている2つのスタイルがあります。濃い青は選択されていないことを表し、水色はすでに選択されてページに表示できることを意味します。私が抱えている問題は、CSSスタイルを切り替えるシンプルで簡単なJS関数をSOで検索したことです。現在、私が持っているものはうまく機能しています。私が抱えている問題は、ページを見ると両方とも濃い青色の背景で始まり、「概要」と呼ばれるリンクの1つだけを水色のBGと「ダークブルーのBGを持つための「機能」リンク。クリックすると、両方がページのコンテンツに切り替わります。

ページへのWebリンク

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

これを変更するにはどうすればよいですか？

4

2 に答える 2

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>
于 2012-10-19T02:48:04.237 に答える
0

基本的には、アクティブなタブの背景画像を右クリックして変更する必要があります...？

于 2012-10-19T02:51:42.443 に答える