HTML Tabs

The HTML

<article id="tab-holder">
    <ul class="tabs autoclear">
        <li data-tab="one" class="first active">Tab One</li>
        <li data-tab="two">Tab Two</li>
        <li data-tab="three" class="last">Tab Three</li>
    </ul>
    <div id="one" class="active">
        <h3>Tab One Content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="two">
        <h3>Tab Two Content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="three">
        <h3>Tab Three Content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</article>

The CSS

.tabs {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 24px;
    border-bottom: 1px solid #AAA;
}

/* Default tab styling */
.tabs > li {
    float: left;
    margin: 0 0 0 3px;
    padding: 0 9px;
    text-decoration: none;
    list-style: none;
    border: 1px solid #AAA;
    border-bottom: none;
    background: #ECECEC;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: pointer;
    z-index: 1;
}

/* Active tab styling */
.tabs > li.active {
    margin-bottom: -1px;
    color: #000;
    background: #FFF;
    border-bottom: 1px solid white;
    z-index: 2;
}

/* Select all closest div's where our parent is #tab-holder */
#tab-holder > div {
    display: none;
    padding: 10px;
}

/* Select our active div & make it viewable */
#tab-holder > div.active {
    display: block;
}

/* Adjust our container height correctly as we have floated items. */
.autoclear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.autoclear { display: inline-block; }
.autoclear { display: block; }
* html .autoclear { height: 1%; }

The JS

jQuery(function($) {
    // When a user clicks on a tab make that content active ( viewable )
    $('#tab-holder > ul li').click(function(){
        var $activeContent = $(this).attr('data-tab');
        $('#tab-holder > ul li, #tab-holder > div').removeClass('active');
        $(this).addClass('active');        
        $('div#' + $activeContent).addClass('active');       
    });
});