Question

What am I doing wrong here?

I am trying to get the background color to change using jquery, on document loaded but it won’t any idea why?

http://jsfiddle.net/KczZd/2/

HTML:

<div class="myTabs">
    <div class="ajax__tab_active">
        <div class=".ajax__tab_inner" style="width: 100px; height: 100px; background-color: green;" >

        </div>
    </div>
</div>

CSS:

.myTabs .ajax__tab_active .ajax__tab_inner{
 width:100px;
 background-color:green;   
}

Javascript:

$(document).ready(function() {
    $('.myTabs .ajax__tab_active .ajax__tab_inner').css('background-color', red);
});

Answer 1

red isn’t declared, much the same as primaryColor wasn’t in your old JSFiddle. You need to make it a string instead:

$('.myTabs .ajax__tab_active .ajax__tab_inner').css('background-color', 'red');

---

Before update

You haven’t declared primaryColor. Declare it and assign it a colour before your $.css() line:

var primaryColor = '#f00';    // Red

$('.myTabs .ajax__tab_active .ajax__tab_inner').css('background-color', primaryColor);

Firebug’s console gives my this error:

primaryColor is not defined

You should always have a debug console open when developing JavaScript; it makes fixing bugs much easier.