Change css when tab has active class
<p>I'm trying to change the background colour of the <code>&lt;body&gt;</code> depending on what tab specific is active.</p>

<p>When a tab is active, a class called 'st_view_active' is added onto the tab content. In the tab content I add a hidden div with the hex code of what my body background colour should be when that tab is active, my jQuery code looks like this:</p>

<pre><code>$(document).ready(function() {
    $(function(){
         $('body').css('backgroundColor',$('.st_view_active').find('.background').text());
     });
 });
</code></pre>

<p>And my html code when the tab is active is following:</p>

<pre><code>&lt;div class="tab-6 st_view st_view_active" &gt;
   &lt;div style="display:none" class="background"&gt;yellow&lt;/div&gt;
   &lt;div class="st_view_inner"&gt;
        tab 6
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>So when tab6 is active the background of the body should be yellow. However, this is not working, the background colour is not changing, what am I doing wrong here?</p>

<p><a href="http://jsfiddle.net/yunowork/CNYDU/1/" rel="nofollow">DEMO</a> and <a href="http://jsfiddle.net/yunowork/CNYDU/1/show/" rel="nofollow">JSfiddle</a></p>

<p>Thanks
PS: The red and blue square is the next and previous tab handler..</p>
