Simple tabs with back button support

Hashchange event + chikuyonok tabs: http://chikuyonok.ru/2009/04/dl-tabs/ http://benalman.com/projects/jquery-hashchange-plugin/

by mrjordy

HTML

<dl class="tabs">
    <dt class="selected"><a href="#first">First</a></dt>
    <dd id="first" class="selected">First Tab Content</dd>
    <dt><a href="#second">Second</a></dt>
    <dd id="second">Second Tab Content</dd>
    <dt><a href="#third">Third</a></dt>
    <dd id="third">Third Tab Content</dd>
    <dt><a href="#fourth">Fourth</a></dt>
    <dd id="fourth">Fourth Tab Content</dd>
</dl>

CSS

.tabs dt {
    float:left;
    margin:0 .5em 0 0;
}
    .tabs dt.selected {
        font-weight:bold;
    }
.tabs dd {
    float:right;
    width:100%;
    margin-left:-100%;
    margin-top:1.5em;
    display:none;
}
    .tabs dd.selected {
        display:block;
    }

JavaScript

$(window).bind('hashchange', function() {
        $('a[href=' + location.hash + ']')
            .parent()
            .siblings().removeClass('selected').end()
            .next('dd').andSelf().addClass('selected');
        
        // TODO: take care of the case when hash == ''
    });
    
    // initialize the page with default hash
    if (location.hash == '') {
        location.hash = '#first';
    }
    
    $(window).trigger('hashchange');
});