Простые таб-ы вариант 1

Html
<dl class="tabs">
  <dt class="active">Html</dt>
  <dd class="active"><div>Content 1</div></dd>
  <dt>Style</dt>
  <dd><div>Content 2</div></dd>
  <dt>Script</dt>
  <dd><div>Content 3</div></dd>
</dl>
Style
dl.tabs dt {
  float: left;
  position: relative;
  background: #F0F0F5;
  height: 15px;
  padding: 8px 12px;
  margin:0 5px 0 -2px;
  cursor:pointer;
}
dl.tabs dd {
  display: none;
  float: right;
  margin:30px 0 0 -100%;
  position: relative;
  width: 100%;
  z-index: 2;
  border: 1px solid #CCCCD1;
  border-width: 10px 1px 1px;
}
dl.tabs dt.active {
  background: #CCCCD1;
  border-bottom: 1px solid #CCCCD1;
  font-weight:bold;
}
dl.tabs dd.active {
  display:block;
}
Script
jQuery(function(){
    jQuery("dl.tabs dt").click(function(){
        jQuery(this)
            .siblings().removeClass("active").end()
            .next("dd").andSelf().addClass("active");
    });
});


Tagged with: ,