Tab Background color

by Rich Costello

HTML

<h1>
Test
</h1>

<div id="tabmenu">
    
    <ul id="nav">
        <li id="tab-1"><a href="#" class="active">Tab 1</a></li>
        <li id="tab-2"><a href="#">Tab 2</a></li>
        <li id="tab-3"><a href="#">Tab 3</a></li>
        <li id="tab-4"><a href="#">Tab 4</a></li>
    </ul>
    
    <div id="tab-content">
        
        <div id="tab1">
            <p>This is a very simple jQuery tabbed navigation.</p>
        </div>
        
        <div id="tab2">
            <p>This can contain anything.</p>
        </div>
        
        <div id="tab3">
            <p>Like photos:</p><br />
            <img src="http://www.catname.org/images/cat04.jpg" alt=""/>
        </div>
        
        <div id="tab4">
            <p>Or videos:</p><br />
            <iframe width="250" height="180" src="http://www.youtube.com/embed/TZ860P4iTaM" frameborder="0" allowfullscreen></iframe>
        </div>
        
    </div>
    
</div>

CSS

* { margin: 0; padding: 0; }
body {
    background-color:red;
    padding:15px;
}

#tabmenu {
    margin: 20px 0 0 20px;
}

li, p { font: 12px/16px Arial, Helvetica, sans-serif; }

#nav {
    overflow: hidden;
    padding-left: 0;
}

#nav li {
    float: left;
    list-style: none;
    background: #EEE;
}

#nav li a {    
    padding: 10px;
    border-top: 1px solid #CCC;
    border-right: 1px solid #CCC;
    display: block;
    background: #CCC;
}

#nav li:first-child a {
    border-left: 1px solid #CCC;
}

#tab-content {
    border: 1px solid #CCC;
    padding: 10px;
    width: 300px;
    margin-top: -1px;
    -moz-border-radius: 0 0 5px 5px;
}

#nav li a.active {
    background: #FFF;
    margin-bottom: -3px;
}

JavaScript

$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#nav li').click(function() {
    $('#nav li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab-content div').hide();
    

    var indexer = $(this).index(); //gets the current index of (this) which is #nav li
    $('#tab-content div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
});
$('[id*="tab-"]').click(function () {
   //e.preventDefault()
    //$(this).tab('show')
    
    if(this.id=="tab-1"){
        $('body').css('background', 'red');
    }
    else if(this.id=="tab-2"){
        $('body').css('background', 'green');
    }
    else if(this.id=="tab-3"){
        $('body').css('background', 'blue');
    }
    else if(this.id=="tab-4"){
        $('body').css('background', 'purple');
    }
    });