Quick tabs

tabs.css

.tabs {
    position: relative;
    padding: 37px 0 0 0;
    margin-bottom: 2em;
}

.tabs > ul {
    position: absolute;
    top: 0;
}

.tabs > ul > li {
    float: left;
    height: 36px;
    line-height: 36px;
    border: 1px #999 solid;
    border-bottom: none;
    margin-right: 5px;
    background: #fafafa;
    padding: 0 1em;
}

.tabs > ul > li.active {
	background: #ffffff;
    height: 37px;
    z-index: 2;
}

.tabs > ul > li a {
    border-bottom: 0;
}

.tabs > div > div {
    padding: 1em;
    border: 1px #999 solid;
    background: #ffffff;
}

tabs.html

<div id="product-tabs" class="tabs">
    <ul>
        <li><a href="javascript:void(0)">Tab link 1</a></li>
        <li><a href="javascript:void(0)">Tab link 2</a></li>
        <li><a href="javascript:void(0)">Tab link 3</a></li>
    </ul>
    <div>
        <div>
          <p>content 1</p>
        </div>
        <div>
          <p>content 2</p>
        </div>
        <div>
          <p>content 3</p>
        </div>
    </div>
</div>

tabs.js

jQuery(document).ready(function(){
    jQuery('#product-tabs > ul > li:first-child').addClass('active');
    jQuery('#product-tabs > div > div').hide();
    jQuery('#product-tabs > div > div:first-child').show();
    jQuery('#product-tabs > ul > li').click(function () {
        var nTab = jQuery(this).index() + 1;
        jQuery('#product-tabs > ul > li').removeClass('active');
        jQuery('#product-tabs > ul > li:nth-child('+nTab+')').addClass('active');
        jQuery('#product-tabs > div > div').hide();
        jQuery('#product-tabs > div > div:nth-child('+nTab+')').show();                
    });
});