0

5つのボタンがある水平ナビゲーションメニューがあり、クリックしたボタンの状態を変更する必要があります。これは私がこれを達成するために使用しているコードです：

HTML：

<div id="tab_menu">

<ul>
<li class="li_class"><a href="#">Link 1</a></li>
<li class="li_class"><a href="#">Link 2</a></li>
<li class="li_class"><a href="#">Link 3</a></li>
<li class="li_class"><a href="#">Link 4</a></li>
<li class="li_class"><a href="#">Link 5</a></li>
</ul>

</div>

CSS：

#tab_menu {
        position:relative;
        width:800px;
        margin:0px auto;
        padding:20px;
        background-color:#fff;
    }

    ul {
        position:absolute;
        top:0px;
        margin:0px;
        background-color:#fff;
        list-style:none;
        overflow:auto;
    }

    ul li {
        float:left;
        width:150px;
        background-color:#1227B0;
        border:1px dashed #fff;
        border-radius:0px 0px 10px 10px;
        height:30px;
    }

    ul li a {
        color:#fff;
        width:150px;
        text-align:center;
        text-decoration:none;
        display:block;
        font-size:14px;
        line-height:30px;
    }

JQUERY：

$(document).ready(function() {
    $('.li_class').click(function() {
        $(this).css('background-color', '#7787F1');
    });
});​

問題は、ボタンのスタイルがクリック時に指定された色に変更されるのですが、別のボタンをクリックすると元のスタイルをボタンに戻す必要があります。これを実現するにはどうすればよいですか？

4

5 に答える 5

2

すべてのボタンをデフォルトの色に戻し（#1227B0コードから）、その後変更$(this)します。

$(document).ready(function() {
    $('.li_class').click(function() {
        $('.li_class').css('background-color', '#1227B0');
        $(this).css('background-color', '#7787F1');
    });
});
于 2012-04-17T11:40:50.790 に答える
1

classjQueryを介して直接CSSスタイルを設定する代わりに、名前を使用してみてください。したがって、ボタンをクリック済みとしてマークする必要がある場合は、クラス名を。で追加し、.addClass('clicked');スタイルを設定したくない場合は削除します.removeClass('clicked');。

もちろん、CSS宣言を作成する必要があります。

.clicked {
  background-color: #7787F1;
}
于 2012-04-17T11:42:39.697 に答える
1

data-そのための属性を使用できます。

HTML：

<ul>
<li data-default-color="#1227B0" class="li_class"><a href="#">Link 1</a></li>
<li data-default-color="#1227B0" class="li_class"><a href="#">Link 2</a></li>
<li data-default-color="#1227B0" class="li_class"><a href="#">Link 3</a></li>
<li data-default-color="#1227B0" class="li_class"><a href="#">Link 4</a></li>
<li data-default-color="#1227B0" class="li_class"><a href="#">Link 5</a></li>
</ul>

jQuery：

$('.li_class').click(function() {
    $(this).css('background-color', '#7787F1').siblings().each(function() {
        $(this).css("background-color", $(this).data('default-color'));
    });
});​

ライブデモ

于 2012-04-17T11:43:25.073 に答える
0

こんにちは次のコードを試してください

    <script>
   $(document).ready(function(){
           $('.li_class').click(function(){
           $('.li_class').css('background-color', '#1227B0');
               $(this).css('background-color', '#7787F1');
           });
        });

    </script>

ここでデモを試してくださいhttp://jsfiddle.net/wpzQj/8/

于 2012-04-17T11:45:05.017 に答える
0

クリックするたびに色をリセットします。

$(document).ready(function(){
           $('.li_class').click(function(){
               $('.li_class').css('background-color', '#1227B0');
               $(this).css('background-color', '#7787F1');
               return false;
           });
        });​

動作するjsFiddleは次のとおりです。http：//jsfiddle.net/wpzQj/5/

于 2012-04-17T11:44:12.870 に答える