Cách tạo Tabs trang web bằng HTML, CSS, Javascript

tạo tab cho trang web bang HTML, CSS, javascript

Cách tạo tabs trong website,  các bạn đang gặp khó khăn tạo dựng CSS, xử lí bằng sự kiện Javascritp thì trong bài này mình có thể giúp các bạn các thiết kế. Bài chia sẻ đơn giản và dễ hiểu cho các bạn đang cần lập trình front-end.

 

Tạo Tabs cho trang web

 

tao tabs trang web

Diễn giải: Khi các bạn click vào tab bất kì thì show ra nội dung tương ứng với tab phía bên dưới.  Mỗi tab chỉ show mỗi nội dung của chính tab đó.

Phân tích thiết kế HTML

Chúng ta sẽ chia thành hai phần:

  • Phần trên dùng cho thanh tab chứa các nút tab
  • Phần bên dưới show nội dung phía dưới.

HTML
<!-- Thanh tabs -->
 <ul class="tab">
 <li><a href="#" class="tab-link" onclick="openTab(event, 1)"> Tab 1 </a></li>
 <li><a href="#" class="tab-link" onclick="openTab(event, 2)"> Tab 2 </a></li>
 <li><a href="#" class="tab-link" onclick="openTab(event, 3)"> Tab 3 </a></li>
 </ul>
 
 <!-- Noi dung Tabs -->
 <div class="tab-content">
 <h1>Tieu de Tab 1</h1>
 <p> Noi dung Tab 1</p>
 </div>
 
 <div class="tab-content">
 <h1>Tieu de Tab 2</h1>
 <p> Noi dung Tab 2</p>
 </div>
 
 <div class="tab-content">
 <h1>Tieu de Tab 3</h1>
 <p> Noi dung Tab 3</p>
 </div>

Giải thích:
Bạn sẽ xây dựng khung HTML: Thanh Tab và nội dung cho từng thanh tab.
Cặp <ul></ul> cho thanh tabs
<div> với class=”tab-content” cho 3 tab tương ứng.

 

CSS:
ul.tab {
 list-style-type: none; /*Xóa các bullet mặc định*/
 margin: 0; /*Reset*/
 padding: 0;
 overflow: auto; /*Fixed float*/
 background: #eee;
 border: 1px solid #ccc;
 }
 
 ul li {
 float: left;
 }
 
 ul a {
 display: inline-block; /* Chuyển qua hiển thị block so với mặc định inline của &amp;amp;lt;a&amp;amp;gt; */
 text-decoration: none;
 padding: 20px;
 font-size: 23px;
 font-weight: bold;
 color: #000;
 }
 
 ul a:hover, .active {
 color: #fff;
 background: red;
 }
 
 
 .tab-content {
 padding: 20px;
 border: 1px solid #ccc;
 border-top: none;
 display: none;
 }

Giải thích:
CSS: Bạn lưu ý với thẻ <a> display cho về cách hiện thị inline-block để margin phía trên và bên dưới.
Chuyển các thẻ a nằm trên cùng một hàng float:left
Sau đó,  nảy sinh vấn để thẻ <div> sẽ float theo thẻ a. Nên các bạn fix lỗi bằng cách thêm overflow: auto <ul>

 

Javascript:
function openTab(e, tabId) {
 
 var i;
 var tabContent = document.getElementsByClassName("tab-content");
 
 // Lặp dùng clear (display: none) các div tab-content
 for (i = 0; i &amp;amp;lt; tabContent.length; i++ ) {
 tabContent[i].style.display = 'none';
 }
 
 // Hiển thị nội dung khi tab nào được click thôi
 tabContent[tabId - 1].style.display = 'block';
 
 
 // Remove class active để tránh tình trạng khi click nhiều tabs đều active 
 var tabLink = document.getElementsByClassName("tab-link");
 for (i = 0; i &amp;amp;lt; tabLink.length; i++ ) {
 tabLink[i].className = tabLink[i].className.replace(' active', '');
 }
 
 // Tab nào được click thì active lên.
 event.currentTarget.className += ' active';
 
 }

Giải thích:
Chúng ta sẽ lấy giá trị class của tab-contenttab-link. Các giá trị này sẽ  duyệt vòng lặp.

Đối với tab-content chạy vòng lặp để cho các thẻ nội dung của các tab lần click trước display trở về none.

Clear  hết trước khi  tabContent[tabId – 1].style.display = ‘block’; thực thi.

Đối với tab-link dùng clear tên class  active bằng câu lệnh replace sau mỗi lần lặp.

Cũng có tác dụng clear hết trước khi gắn lại class active:
event.currentTarget.className += ‘ active’;

 

Lời kết

Mình đã có gắng truyền đạt thông tin chi tiết và giải thích đơn giản cho các bạn. Hi vọng sau tutorial này các bạn có thể hiểu rõ và xây dựng tabs trong trang web của mình.

Hãy comment phía dưới nếu bạn có bất kì thắc mắc nào liên quan chủ để này.

Leonard Huynh,

Bạn có thể thích

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *