获取链接以保持活跃

Question

我有 4 个选项，当单击它们时，单击的选项变为焦点并且其背景颜色/文本颜色发生变化，而所有其他选项都恢复为正常状态。我有一些代码可以更改字体颜色，但我不知道如何更改 div 颜色。我也在尝试用 CSS 和这段代码弄清楚如何在页面加载时默认突出显示其中一个选项。

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

Answer 1

好吧，.on 在您的选择器上不起作用，所以我将其更改为 .live 并将您的背景选择器更改为 .current-div，因为您的 a 标签需要 display: block 以具有可见的背景。

检查一下：

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