0

私はナビゲーションリストを持っています:

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>

ホームまたは連絡先をクリックすると、それぞれの div が非表示または表示されます。

<script>

$("#tabs a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr('href');
    $(toShow).show();
});

</script>

<div id="home" class="toggle" style="display:none"> This is the Home page.</div>

質問

対応する div が表示されているときに、ナビゲーション リスト内の単語の背景を変更するにはどうすればよいですか?

たとえば、「ホーム」という div が表示されている場合、ナビゲーションの「ホーム」という単語の背景は青色になります。

4

3 に答える 3

1

クリックした要素に背景色を追加する必要がありますが、最後にクリックした要素から背景色を削除することも忘れないでください。

$("#tabs a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr('href');
    // Remove the class from any siblings if it exists
    $("#tabs a").removeClass('yourClass');
    // Add the class to the clicked #tab a
    $(this).addClass('yourClass');
    $(toShow).show();
});

次に、CSSファイルにクラス（たとえば、「yourClass」）を作成します。このクラスは、背景色や編集したいその他のものに属性を付けます。

.yourClass {
    background: #e2e2e2;
}
于 2012-11-09T03:41:49.767 に答える
1

例：

$('ul a').click(function() {
    $(this).closest('ul').find('a').css('background-color', '');

    $(this).css('background-color', 'red')
    return false;
});​

デモ

于 2012-11-09T03:45:44.780 に答える
1 
   <script>

    $("#tabs a").click(function(e){
        e.preventDefault();
        $(#tabs a).removeClass('yourClass');
        $(this).addClass('active');
        $(".toggle").hide();
        var toShow = $(this).attr('href');
        $(toShow).show();
    });

    </script>

CSS

.active
{
background-color:blue;
}

お役に立てれば！！

于 2012-11-09T03:43:25.073 に答える