Simple tabs with back button support

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

HTML

<script src="https://github.com/cowboy/jquery-hashchange/raw/v1.3/jquery.ba-hashchange.min.js"></script>
<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>
</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

/* 
dependencies:
    jquery.1.4.4 <http://jquery.com>
    jquery.hashchange.js <http://benalman.com/projects/jquery-hashchange-plugin/>
*/

  $(function(){
      $(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');
  });