0

クリックすると、クリックされたオプションがフォーカスされ、背景色/テキスト色が変更され、他のすべてが通常の状態に戻る4つのオプションがあります。フォントの色を変更できるコードがいくつかありますが、div の色を変更する方法がわかりません。また、CSS とこのコードを使用して、ページの読み込み時にデフォルトでオプションの 1 つを強調表示する方法を理解しようとしています。

Jquery- 最後の行 "($("a")" は、フォントの色を変更するコード行です。その上のコードは、ページにあるフィルタリング システムと関係があります。

$(function () {
         var $panels = $( '#image-wrapper .panel' );

        $( '#category > div > a' ).on( 'click', function (event) {
            event.preventDefault();

            var categoryToShow = $( this ).data( 'filter' );
            $panels.addClass( 'active' ).filter( '.' + categoryToShow ).removeClass( 'active' );
            $("a").addClass("active-color").not(this).removeClass("active-color");
            /*$("#category .current-div").addClass("active-bg").not(this).removeClass("active-bg");*/
        } );
    });

HTML

<div id="category">
            <div class="all-div current-div">
                <a href="#" data-filter="all"><h2>ALL</h2></a>
            </div>
            <div class="ed-div current-div">
                <a href="#" data-filter="ed"><h2>EDITORIAL</h2></a>
            </div>
            <div class="pr-div current-div">
                <a href="#" data-filter="pr"><h2>PR</h2></a>
            </div>
            <div class="cr-div current-div">
                <a href="#" data-filter="cr"><h2>CREATIVE</h2></a>
            </div>
        </div>

CSS

#content, 
#category {
    overflow: hidden;
}

#category div {
    float: left;
    margin: 40px 0 0 0;
    height: 100px;
    width: 240px;
    background-color: #F5F5F5;
}

#category .all-div {
    background-color: #000000;
}
#category .all-div a {
    color: #ffffff;   
}

.active-color {
    color: #000000;
    background-color: green;
}
.active-bg {
    background-color: green;
}
4

1 に答える 1

0

さて、セレクターで .on が機能していなかったので、それを .live に変更し、背景用のセレクターを .current-div に変更しました。

これをチェックして：

http://jsfiddle.net/A3n7S/15/

$(function () {

     var $panels = $( '#image-wrapper .panel' );

     $(".current-div").not('.all-div').first().addClass("active-color")
     $( '#category > div > a' ).live( 'click', function (event) {
        event.preventDefault();  
        var categoryToShow = $( this ).data( 'filter' );
        $panels.addClass( 'active' ).filter( '.' + categoryToShow ).removeClass( 'active' );
        $(".current-div").not('.all-div').removeClass("active-color");
        $(this).parent().addClass("active-color");

      /*$("#category .current-div").addClass("active-bg").not(this).removeClass("active-bg");*/
    } );
});

それを置き換えます：

.active-color {
   color: #000000;
   background-color: green;
}

と：

 #category .active-color {
   color: #000000;
   background-color: green;
 }
于 2013-02-28T20:08:21.450 に答える