CSS background color and text change with jquery/javascript
css, jquery
Solution
You are coding `$(context, selector)` instead of the `$(selector, context)`, change:
$(this, '.tab1').css({'background-color': '#ccc'});
$(this, '.tab1 a').css({'color': 'red'});
To:
$(this).css({'background-color': '#ccc'});
$('a', this).css({'color': 'red'});
Problem
Having trouble with a piece of code to change both the background color and text color when a link is clicked..... ``` <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> ``` This is the 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'}); }); ``` This changes the background color but the text remains white as in the css file.