获取链接以保持活动状态

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

好吧，。对没有工作在你的选择，所以我改成了.live的d将您的背景选择器更改为.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; 
}