활성 상태로 유지할 링크 가져 오기

Question

나는 클릭 할 때 클릭 한 옵션에 초점이 맞추어지고 배경색/텍스트 색이 변경되는 반면 다른 모든 것은 정상 상태로 되돌아가는 네 가지 옵션이 있습니다. 글꼴 색상을 변경할 수있는 코드가 있지만 div 색상을 변경하는 방법을 알 수 없습니다. 또한 CSS에서이 코드를 사용하여 페이지로드시 옵션 중 하나를 강조 표시하는 방법을 설명하려고합니다.

Jquery- 마지막 줄에 "($ ("가 ")"글꼴 색상을 변경하는 코드 줄입니다. 위의 코드는 내가 페이지에있는 필터링 시스템과 관련이있다가

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

음, 그래서 그것을 변경 CSTE 연구진은 당신의 선택에 작동하지 않는 .live에 배경에 대한 선택자를 .current-div로 변경했습니다. 태그에 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; 
}