Bài viết này mình sẽ hướng dẫn làm cách nào để tạo các tab chuyển đổi qua lại nội dung sử dụng CSS và Javascript với hiệu ứng mềm mại
Cấu trúc code để hiển thị nội dung và các tabs
<div id="tabtvl">
<div class="tab-menu-tvl">
<ul id="tebslecttvl">
<li class="tab1z">
<a href="#xtabx1">Tab 1</a>
</li>
<li class="tab2z">
<a href="#xtabx2">Tab 2</a>
</li>
</ul>
</div>
<div id="sidetvl">
<div class="widget1xx" id="xtabx1">
Nội dung tab 1
</div>
<div class="widget1xx" id="xtabx2">
Nội dung tab 2
</div>
</div>
</div>
CSS
#tabtvl{margin:0 0 15px}
ul#tebslecttvl,ul#tebslecttvl li{padding:0;margin:0;list-style:none;overflow:hidden}
ul#tebslecttvl li{float:left}
ul#tebslecttvl a{display:block;margin:0 5px 0 0;line-height:30px;padding:0 10px;background:#E9D3D3;border-radius:3px 3px 0 0;font-weight:bold}
ul#tebslecttvl li.active a,ul#tebslecttvl a:hover{background:#E6E6E6;color:black}
#sidetvl{padding:10px;background:#E6E6E6;border-radius:0 3px 3px;}
Javascript
Bạn hãy chọn 1 trong hai hiệu ứng chuyển tab bên dưới, xem demo để rõ hơn