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，因为您的标签需要显示：阻止具有可见背景。

检查一下：

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

获取保持活跃的链接

1 个答案: