CSS背景色和使用jQuery/JavaScript的

Question

有一段代碼同時改變背景顏色和文字顏色點擊一個鏈接時遇到問題文本變化.....

<div id="main_nav"> 
    <ul class="navigation"> 
     <li class="tab1"><a href="javascript:void(0);">My Account</a></li> 
     <li class="tab1"><a href="javascript:void(0);">Available Times</a></li> 
     <li class="tab1"><a href="javascript:void(0);">Completed Jobs</a></li> 
     <li class="tab1"><a href="javascript:void(0);">New Jobs [<span class="menu_count2"></span>]</a></li> 
     <li class="tab1"><a href="javascript:void(0);">Todays Jobs [<span class="menu_count"></span>]</a></li> 
    </ul> 
</div> 

這是jQuery的...

$(document).on('click', '.tab1', function(){ 
    $('.tab1').css({'background-color' : '#5B1762'}); 
    $('.tab1 a').css({'color' : '#fff'}); 
    $(this, '.tab1').css({'background-color': '#ccc'}); 
    $(this, '.tab1 a').css({'color': 'red'}); 
}); 

這改變了背景顏色，但文本保持白色，如在CSS文件中。

Answer 1

您編碼$(context, selector)代替$(selector, context)，變化：

$(this, '.tab1').css({'background-color': '#ccc'}); 
$(this, '.tab1 a').css({'color': 'red'}); 

要：

$(this).css({'background-color': '#ccc'}); 
$('a', this).css({'color': 'red'}); 

Answer 2

可以做到這一點太：

$('.tab1').click(function(){ 
    $('.tab1').css({'background-color' : '#5B1762'}).find('a').css({'color' : '#fff'}); 
    $(this).css({'background-color': '#ccc'}).find('a').css({'color': 'red'}); 
});