Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Component Tab Bằng HTML CSS

Tạo Component Tab Bằng HTML CSS


Ngày 27 Tháng 11 Năm 2020

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo thẻ tab và thêm hiệu ứng animation cho nó bằng HTML CSS và Javascript nhé!

Tạo Cấu Trúc Cho Component Tab

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Font Awesome v4.7 và Google Font thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Tạo Component Tab</title>
      <link rel="stylesheet" href="style.css">
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
 </body>
 </html>

Tạo Cấu Trúc Cho Component Tab

Trong phần này chúng ta sẽ đi vào thêm các thẻ HTML cần thiết để tạo component tab thông qua đoạn mã sau nhé:

HTML

<div class="tab">
    <!--Bắt Đầu Phần Tab Header-->
    <div class="tab-header">
        <div class="active"><i class="fa fa-code"></i> Trang Chủ</div>
        <div><i class="fa fa-pencil-square-o"></i> Về Chúng Tôi </div>
        <div><i class="fa fa-bar-chart"></i> Dịch Vụ</div>
        <div><i class="fa fa-envelope-o"></i> Liên Hệ</div>
    </div>
    <!--Kết Thúc Phần Tab Header-->
    <div class="tab-indicator"></div>
     <!--Bắt Đầu Phần Tab Body-->
    <div class="tab-body">
        <div class="active">
            <h2>Phần Tab Thể Hiện Trang Chủ</h2>
            <p>Lorem ipsum dolor sit amet consectetur...</p>
        </div>
        <div>
            <h2>Phần Tab Thể Hiện Về Chúng Tôi</h2>
            <p>Lorem ipsum dolor sit amet consectetur...</p>
        </div>
        <div>
            <h2>Phần Tab Thể Hiện Về Dịch Vụ</h2>
            <p>Lorem ipsum dolor sit amet consectetur...</p>
        </div>
        <div>
            <h2>Phần Tab Thể Hiện Về Liên Hệ</h2>
            <p>Lorem ipsum dolor sit amet consectetur...</p>
        </div>
    </div>
    <!--Kết Thúc Phần Tab Body-->
</div>

Và kết quả bạn xem hình ảnh bên dưới nha:

tab phần 1

Thiết Lập Vị Trí Cho Tab

Trong phần này chúng ta sẽ đi vào thiết lập một số thuộc tính CSS tổng quát cho component tab như là font chữ, vị trí trong trang web, padding, độ bo góc... Để hiểu rõ hơn bạn xem đoạn code sau nhé:

CSS

body{
    background: #ddd;
    font-family: Roboto;
}
.tab{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 250px;
    background: #f5f5f5;
    padding: 20px 30px;
    overflow: hidden;
    border-radius: 50px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12),
    0 2px 2px rgba(0,0,0,0.12),
      0 4px 4px rgba(0,0,0,0.12),
    0 8px 8px rgba(0,0,0,0.12),
    0 16px 16px rgba(0,0,0,0.12);
}

Và kết quả bạn xem hình ảnh bên dưới nhé:

tab phần 2

Thiết Lập Style Cho Tab Header

Trong phần tiếp theo bạn hãy cùng mình đi vào thiết lập lại style cho tab header để các thành phần trong nó có thể nằm thẳng hàng với nhau và nhìn có tính thẩm mỹ hơn nhé :

CSS

.tab .tab-header{
    height: 60px;
    display: flex;
    align-items: center;
}
.tab .tab-header > div{
    width: calc(100% / 4);
    text-align: center;
    color: #888;
    font-weight: 500;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
    outline: none;
}
.tab .tab-header > div > i {
    display: block;
    margin-bottom: 5px;
}
.tab .tab-header > div.active{
    color: #00acee;
}

Và kết quả bạn xem hình bên dưới nha:

tab phần 3

Thêm CSS cho Thẻ Tab Body

Trong phần này chúng ta sẽ đi vào thiết lập CSS cho hai thành phần .tab-indicator(Thanh Tiến Trình Cho Tab) và .tab-body(Nội Dung Của Thẻ Tab) thông qua đoạn code dưới đây nhé:

CSS

.tab .tab-indicator {
    position: relative;
    width: 25%;
    height: 5px;
    background: #00acee;
    left: 0px;
    border-radius: 5px;
    transition: all 500ms ease-in-out;
}
.tab .tab-body{
    position: relative;
    height: calc(100% - 60px);
    padding: 10px 5px;
}
.tab .tab-body > div{
    position: absolute;
    top: -200%;
    opacity: 0;
    margin-top: 5px;
    transform: scale(0.9);
    transition: opacity 500ms ease-in-out 0ms,
                transform 500ms ease-in-out 0ms;
}
.tab .tab-body > div.active{
    top: 0px;
    opacity: 1;
    transform: scale(1);
    margin-top: 0px;
}

Và kết quả bạn xem dưới đây nha:

tab phần 4

Thêm Chức Năng Cho Tab Bằng Javascript

Sau khi đã thiết kế xong phần giao diện thì bước tiếp theo chúng ta sẽ thêm chức năng cho component tab thông qua đoạn mã Javascript sau nhé:

Javascript

/*Lấy Các Phần Tử Trong Thẻ DOM*/
let tabHeader = document.getElementsByClassName("tab-header")[0];
let tabIndicator = document.getElementsByClassName("tab-indicator")[0];
let tabBody = document.getElementsByClassName("tab-body")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
/*Thực Hiện Vòng Lặp*/
for (let i = 0; i < tabsPane.length; i++) {
    tabsPane[i].addEventListener("click", function () {
        tabHeader.getElementsByClassName("active")[0].classList.remove("active");
        tabsPane[i].classList.add("active");
        tabBody.getElementsByClassName("active")[0].classList.remove("active");
        tabBody.getElementsByTagName("div")[i].classList.add("active");
        tabIndicator.style.left = `calc(calc(100% / 4) * ${i})`;
    })
}

Ở đây mình sẽ giải thích từng phần code để giúp bạn dễ hình dung hơn nhé.
Đầu tiên là chúng ta sẽ thêm class active khi người dùng nhấn vào các thẻ tab trên header như là trang chủ, về chúng tôi, dịch vụ, liên hệ và đồng thời cũng sẽ xóa class active của header tab trước đó. Để dễ hình dung bạn xem đoạn mã :

/*Xóa class active trên thẻ tab header cũ*/
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
/*Thêm class active vào thẻ tab header mới được nhấn*/
tabsPane[i].classList.add("active");

Và đây là video minh họa cho bạn dễ hình dung hơn nhé:

Đối với thẻ tab-body thì cách hoạt động cũng như vậy nha. Và kết quả cuối cùng của chúng là :

Nếu bạn muốn nguồn dự án trên Codepen thì có thể tham khảo đường dẫn bên dưới nha:

Nguồn Codepen

Nếu bạn muốn tham khảo thêm các component tab khác dành cho trang web thì có thể truy cập đường dẫn dưới nhé:

Nguồn Tab

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức tạo component tab hữu ích việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!