Javascript 获取链接以保持活动状态

我有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

---

嗯，.on无法处理您的选择器，因此我将其更改为.live，并将您的背景选择器更改为.current div，因为您的a标记需要display:block才能具有可见的背景

选中此项：

替换为：

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

与：

---

使用this.parent（）方法如何好的，我更改了代码，以反映我对结果的看法。这就是我的想法，只是我尝试在单击新链接后将黑色div恢复为灰色（因此它类似于其他3个非活动链接）；这只是默认的开始位置。我只是在CSS中这样做，因为我不知道如何做。好吧，摆弄你的代码，我找到了如何让它做我想要的。非常感谢。我现在唯一需要的是找到如何让其中一个div开始集中。是的！我找到了除了“$（“.current div”）以外的所有东西.removeClass（'all-div active color'）；“太棒了。非常感谢。另一个快速问题-我有一些图像在单击其中一个过滤器时变为透明，有什么原因它在IE7/8中不起作用吗？”？

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

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