Basic Tab - JQuery

by Taufik Nurrohman

HTML

<div id="tab-outer">
    <ul id="tab-wrapper">
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
        <li><a href="#tab4">Tab 4</a></li>
    </ul>
    <div id="tab-body">
        <div id="tab1">
            <h2>Tab 1</h2>Lorem ipsum dolor sit amet
        </div>
        <div id="tab2">
            <h2>Tab 2</h2>Consectetuer adipiscing elit
        </div>
        <div id="tab3">
            <h2>Tab 3</h2>Sed diam nonummy nibh euismod tincidunt
        </div>
        <div id="tab4">
            <h2>Tab 4</h2>Ut laoreet dolore magna aliquam erat volutpat
        </div>
    </div>
</div>

CSS

#tab-outer {
  position:relative;
  font:normal 12px Arial,Sans-Serif;    
}

#tab-outer * {
  margin:0px 0px;
  padding:0px 0px;    
}

#tab-wrapper {
  list-style:none;
  height:30px;
}

#tab-wrapper li {
  margin:0px 0px 0px 2px;
  float:left;
  font-weight:bold;
}

#tab-wrapper li a {
  display:block;
  padding:0px 15px;
  line-height:30px;
  text-decoration:none;
  color:white;
  background-color:#CD4A07; 
}

#tab-wrapper li.active a {
  background-color:#A23E0D;
}

#tab-body > div {
  background-color:#A23E0D;
  color:white;
  padding:10px 15px;
  border-bottom:4px solid #CD4A07;
  height:200px; /* Contoh */    
}

JavaScript

$('#tab-wrapper li:first').addClass('active');
$('#tab-body > div').hide();
$('#tab-body > div:first').show();
$('#tab-wrapper a').click(function() {
    $('#tab-wrapper li').removeClass('active');
    $(this).parent().addClass('active');
    var activeTab = $(this).attr('href');
    $('#tab-body > div:visible').hide();
    $(activeTab).show();
    return false;
});