CSS background color and text change with jquery/javascript

Question

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.

What exactly is the problem, what is happening and what do you expect to happen ? — Teneff
– Teneff, Commented Nov 12, 2012 at 8:52

Ram · Accepted Answer · 2012-11-12 08:59:56Z

8

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

edited Nov 12, 2012 at 8:59

answered Nov 12, 2012 at 8:53

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Reflective · Accepted Answer · 2012-11-12 09:04:15Z

2

Could be done that way too:

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

answered Nov 12, 2012 at 9:04

Reflective

3,9371 gold badge17 silver badges25 bronze badges

Collectives™ on Stack Overflow

CSS background color and text change with jquery/javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related