Hướng dẫn tab css

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn các bạn xây dựng một cái chức năng rất phổ biến hiện nay trong các trang web đó là tabs.

Tại Sao Mình Lại Hướng Dẫn Các Bạn Xây Dựng Tabs

Thì các bạn thử search trên google có rất nhiều bài viết hướng dẫn các bạn làm tabs, các plugin như bootstrap tabs,.. Nhưng mà mình vẫn muốn viết bài để hướng dẫn các bạn. Vậy mục đích của mình là gì?

Mục Đích Bài Viết

Mục đích của bài viết này giúp các bạn ôn lại các kiến thức về html, css và js. Không phụ thuộc quá nhiều vào các thư viện giúp các bạn nâng cao khả năng tư duy, logic và khả năng giải quyết vấn đề.

Bắt Đầu Thôi Nào

Lên Ý Tưởng

Thì thằng tabs này nó sinh ra dùng để hiển thị các thể loại khác nhau theo từng tabs khác nha. Chúng ta sử dụng html, css để làm layout và dùng JS để làm hiểu ứng chuyển tabs.
Ví dụ như website linh kiện điện tử 3M trong phần sản phẩm nổi bật nó cũng chia ra làm ba tabs khác nha.

Code Thôi Nào

Code HTML

Trước tiên các bạn cần phải code cho mình một bộ khung cần có để tạo tabs cho nó. Trong tabs đó có hai phần chính là tab links và tab content.
Trong tab links các bạn tạo cho mình các button trong button này chứa các data- attributes. để có thể truy vấn vào được các tab content mục đích là sử dụng tab links để chuyển các tabs.
Tiếp theo là trong tab content các bạn cho mình mỗi content một id khác nhau nhưng phải giống các giá trị trong data-attributes. Còn nội dung như thế nào thì bạn có thể tự custom theo ý muốn.
Các bạn để ý trong button đầu tiên của tab links chúng ta sẽ thấy thêm một class nữa đó là active, vậy class active đó dùng để làm gì vậy thì chúng ta cùng xem ở phần css nha. Cũng tương tự như trong phần tab content.

 
      

         Tất cả sản phẩm
         Vi điều khiển - Nhúng
         Module ứng dụng
      

      
      

         

           

           
Combo Trạm Hàn Hakko 936 + Sensor Hàn A1321
         

         

                

           
Raspberry Pi 4 Model B 2019
         

         

           

           
Module Khuếch Đại Âm Thanh Bluetooth Stereo 30W/40W Công Suất Cao XY-P40W
         
      

lưu ý: Mình sử dụng codepen.io để code tạo tabs, các bạn cũng có thể sử dụng các text editor hay IDE khác để code tạo tabs nha.
Các bạn cùng xem thử kết quả khi chúng ta code HTML cho nó nha.

Code CSS

Để mà tabs chúng ta dễ nhìn hơn, bố cục đẹp mắt hơn thì chúng ta cần phải css cho nó. Trong phần CSS này mình không nói nhiều cho lắm bởi vì đây hoàn toàn là các kiến thức cơ bản.
Trong này các bạn css cho mình hai .active đó là .tablinks.active và .tabcontent.active một cái là dùng để hiển thị màu nền, màu chữ cái còn lại dùng để hiển thị nội dung của tab mà chúng ta add class vào.

/* Tab Links */
.tabs{
  display:flex;
}
.tablinks {
  border: none;
  outline: none;
  cursor: pointer;
  width: 100%;
  padding: 1rem;
  font-size: 13px;
  text-transform: uppercase;
  font-weight:600;
  transition: 0.2s ease;
}
.tablinks:hover{
  background:blue;
  color:#fff;
}
/* Tab active */
.tablinks.active {
   background:blue;
  color:#fff;
}

/* tab content */
.tabcontent {
  display: none;
}
/* Text*/
.tabcontent p {
  color: #333;
  font-size: 16px;
}
/* tab content active */
.tabcontent.active {
  display: block;
}

Các bạn cùng xem thử kết quả khi chúng ta code CSS cho nó nha.

Cuối cùng thì công việc chia layout cũng như giao diện cho tabs chúng ta cũng đã làm xong một cách cũng khá là ổn giờ đến công đoạn làm hiệu ứng chuyển tabs.

Code Javascript

Đây là phần khá là quan trọng trong bài viết ngày hôm. Tuy nó khá quan trọng nhưng nó cũng không quá khó lắm đâu.
Trước tiên mình sẽ nói sơ qua thuật toán tí làm sao để chúng ta có thể chuyển tabs. Thì trong tabs link chúng ta có ba button thì khi click button thứ hai thì nội dung trong thẻ thứ hai phải được hiển thị và cũng tương tự như nội dung trong thẻ button thứ ba và thứ nhất. Và các thẻ mà được add .active khi click vào button khác thì phải được remove.
Vì vậy nên chúng ta mới sử dụng data-attribute và id để có thể lấy được nội dung của từng tab khác nhau.

var tabLinks = document.querySelectorAll(".tablinks");
var tabContent =document.querySelectorAll(".tabcontent");

tabLinks.forEach(function(el) {
   el.addEventListener("click", openTabs);
});


function openTabs(el) {
   var btn = el.currentTarget; // lắng nghe sự kiện và hiển thị các element
   var electronic = btn.dataset.electronic; // lấy giá trị trong data-electronic
 
   tabContent.forEach(function(el) {
      el.classList.remove("active");
   }); //lặp qua các tab content để remove class active

   tabLinks.forEach(function(el) {
      el.classList.remove("active");
   }); //lặp qua các tab links để remove class active

   document.querySelector("#" + electronic).classList.add("active");
   // trả về phần tử đầu tiên có id="" được add class active
   
   btn.classList.add("active");
   // các button mà chúng ta click vào sẽ được add class active
}

Chúng ta để ý thấy hai dòng đầu tiên tại sao mình lại không sử phương thức getElementsByClassName mà lại sử dụng querySelectorAll thì câu trả của mình thì sử dụng cái nào cũng được cả nếu đó là class thì getElementsByClassName.
Để có thể chuyển tab chúng ta cần phải bắt sự kiện click để có thể click vào các button để chuyển tab. tham số el này là từ được viết tắt bởi từ element.

Thì mặc định tab links và tab content thư nhất sẽ được add class sẵn. Nên khi chúng ta click vào tab links thứ hai thì tab links, tab content sẽ được chạy vòng lặp nếu thằng nào trong tab links hay tab content có add .active thì sẽ bị remove. Khi remove xong thì tab links và tab content thứ hai sẽ được add .active

Chúng ta cùng xem thử nó chuyển tab như thế nào nhé.

Các bạn có thể tham khảo full source code mình đã code trong codepen tại đây

Lời Kết

Vậy Là Xong bài viết Hướng Dẫn Xây Dựng Tabs Với HTML, CSS và Javascript rồi nhé. Mình mong muốn sau bài topic này các bạn có thể nắm vững thêm về các kiến thức HTML, CSS và JS... Học thêm được nhiều kiến thức tuy không mới lắm nhưng cũng có thể giúp được phần nào đó của các bạn. Có thể tự tay mình làm những project không cần phải quá đặc biệt nhưng nó do chính bạn làm thì cũng coi như là thành quả trong quá trình bạn học được.

Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha

Chúc Các Bạn Thành Công!!