獲取鏈接以保持活動狀態

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