I'm trying to change the background colour of the <body> depending on what
tab specific is active.
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:
$(document).ready(function() {
$(function(){
$('body').css('backgroundColor',$('.st_view_active').find('.background').text());
});
});
And my html code when the
tab is active is following:
<div class="tab-6 st_view st_view_active" >
<div style="display:none" class="background">yellow</div>
<div class="st_view_inner">
tab 6
</div>
</div>
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?
DEMO and JSfiddle
Thanks
PS: The red and blue square is the next and previous
tab handler..
