Tạo các tab nội dung chuyển qua lại bằng JS

Demo

Giới thiệu
HTML
CSS
JS

Sử dụng các đoạn code ở các tab HTML, CSS, JS để tạo ra nội dung các tab như Demo
Bạn có thể sử dụng tool bên dưới để tạo nhanh nội dung 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>
    </ul>
    <div id="tab-body">
        <div id="tab1">Nội dung tab 1</div>
        <div id="tab2">Nội dung tab 2</div>
        <div id="tab3">Nội dung tab 3</div>
    </div>
</div>

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


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

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

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

#tab-wrapper li.active a {
  background-color: #005b53;
  color: #fff;
}

#tab-body > div {
  background-color: #005b53;
  color:white;
  padding:10px 15px;
  border-bottom: 4px solid #99bdba;
}

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