javascript - 获取链接以保持活跃

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 标签需要显示: 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;
 }