Anthony

Tabbed Content

by seemly

HTML

<ul class="tabs">
    <li> <a href="#tab1">Link 1</a>

    </li>
    <li> <a href="#tab2">Link 2</a>

    </li>
    <li> <a href="#tab3">Link 3</a>

    </li>
    <li> <a href="#tab4">Link 4</a>

    </li>
    <li> <a href="#tab5">Link 5</a>

    </li>
</ul>
<div class="tabbedContent">
    <div id="tab1" class="tabContent">Page 1</div>
    <div id="tab2" class="tabContent">Page 2</div>
    <div id="tab3" class="tabContent">Page 3</div>
    <div id="tab4" class="tabContent">Page 4</div>
    <div id="tab5" class="tabContent">Page 5</div>
</div>

CSS

.tabbedContent {
    width:100%;
    float:left;
}
.tabContent {
    width:100%;
    float:left;
}
.positionOff {
    position:absolute;
    top:-9999em;
}

JavaScript

function tabs(tabsContainer, tabContentContainer) {
    tabsContainer = tabsContainer || 'body';
    tabContentContainer = tabContentContainer || '.tabbedContent';

    var tab = tabsContainer + ' ul.tabs li';
    var tabContent = tabContentContainer + ' > .tabContent';

    $(tab + ':first-child').addClass('active');

    $(tabContent + ':not(:first-child)').addClass('positionOff');

    $(tab + ' a').click(function (ev) {
        $(tab).removeClass('active');
        $(this).parent().addClass('active');
        $(tabContent).addClass('positionOff');

        var activeTab = $(this).attr('href');
        $(activeTab).removeClass('positionOff');

        ev.preventDefault();
    });

    urlHash = window.location.hash;
    if ($(urlHash).length > 0) {
        $("a[href='" + urlHash + "']").click();
    }

    $(window).bind('hashchange', function () {
        urlHash = window.location.hash;
        $("a[href='" + urlHash + "']").click();
    });
}

tabs();