Tabs Made Easy

by Joe Saad

HTML

<div id="tabs">
    <ul id="tabs-navigation">
        <li><a href="#add-zip">Add Zip Code</a></li>
        <li><a href="#delete-zip">Delete Zip Code</a></li>
        <li><a href="#update-tdsp">Update TDSP</a></li>
    </ul>
    <div id="add-zip">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div id="delete-zip">
        <p>Sed do eiusmod tempor incididunt.</p>
    </div>
    <div id="update-tdsp">
        <p>Ut enim ad minim veniam</p>
    </div>
</div>

CSS

div#tabs { width:95%; margin-top:10px;}
div#tabs > div { min-height:200px;}

ul#tabs-navigation {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#tabs-navigation li {
    display: inline;
}

ul#tabs-navigation li a {
    font-size:smaller;
    padding: 3px 5px;
    background-color: #ccc;
    color: #000;
    text-decoration: none;
}
ul#tabs-navigation li.active a,
ul#tabs-navigation li a:hover {
    background-color: #333;
    color: #fff;
    padding-top: 7px;
}

ul#tabs-navigation li a:focus {
    outline: 0;
}

div#tabs > div {
    padding: 5px;
    margin-top: 0px;
    border: 1px solid #b0b0b0;
}

JavaScript

$('#tabs > div').hide();
$('#tabs > div:first').show();
$('#tabs > ul li:first').addClass('active');
 
$('#tabs ul li a').click(function(){
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs div').hide();
    $(currentTab).show();
    return false;  
});