Simple jQuery Tabs

HTML

<div class="tabmenu">
  <div class="hola">
  
    <ul>
        <li><a href="#" class="active">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
    </div>
    
    <div class="contenedor">
        <div>
            <p>This is a very simple jQuery tabbed navigation.</p>
        </div>
        <div>
            <p>This can contain anything.</p>
        </div>
        <div>
            <p>Like photos:</p><br />
            <div style="width:200px;height:200px;background:#0f0;"></div>
        </div>
        <div>
            <p>Or videos:</p><br />
            <div style="width:400px;height:400px;background:#f00;"></div>
        </div>
    </div>
</div>

CSS

* { margin: 0; padding: 0; }

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

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

.tabmenu ul {
    overflow: hidden;
    padding-left: 0;
}

.tabmenu ul li {
    float: left;
    list-style: none;
    background: #EEE;
}

.tabmenu ul li a {    
    padding: 10px;
    border-top: 1px solid #CCC;
    border-right: 1px solid #CCC;
    display: block;
    background: #CCC;
}
.tabmenu ul li a.active {
    background: #FFF;
    margin-bottom: -3px;
}

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

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

.tabmenu div div {
    display:none;
}
.tabmenu div div * {
    display:block;
}
}

JavaScript

$('.tabmenu div').each(function(){
    $(this).children('div:first').show();
});

$('.tabmenu > .hola > ul li').click(function() {
    var $self = $(this);
    var $nav = $(this).parent().parent();
    var $tabCtl = $nav.parent();
    $nav.find('a').removeClass("active");
    $self.find('a').addClass("active");
    $tabCtl.children('div').children('div').hide();

    var indexer = $self.index(); //gets the current index of (this) which is #nav li
    
    $tabCtl.children('div').children('div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
});