Tạo Tab Nội Dung đơn giản với HTML, CSS, jQuery

Chủ đề chính là gần đây có bạn hỏi mình về cách phân trang bài viết cho Blogspot Thực chất thì thủ thuật này có tên gọi là Tab Nội Dung (Tabbed Content) rất nhiều trên mạng, đủ cách làm Javascript, jQuery ngay cả CSS3 không cũng làm được nữa. Và không chỉ dành riêng cho Blogspot mà bất cứ mã nguồn nào hỗ trợ những ngôn ngữ làm web cơ bản.

Bài viết này chúng ta sẽ cùng nhau làm các Tab mà trong mỗi Tab là những phần nội dung của chúng ta. Việc phân chia nội dung theo Tab có nghĩa là sao, toàn bộ phần nội dung sẽ không được hiển thị mà sẽ được chia ra từng phần nhỏ nằm trong từng Tab. Khi người dùng chọn vào một Tab bất kì thì website sẽ hiển thị lên nội dung tương ứng. Chúng ta bắt đầu vào làm nó nhé, lần này mình sẽ hướng dẫn bằng jQuery, bạn nào thích mình hướng dẫn bên CSS3 thì có thể cho mình biết nhé.

DEMO

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5

Nội dung cho tab 1

Cấu trúc HTML

Đối với cấu trúc cho việc làm Tab Nội dung thì khá đơn giản.

<ul id="tabs">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
    <li>Tab 5</li>
</ul>
<ul id="tab">
    <li class="active">
        <h2>Nội dung cho tab 1</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 2</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 3</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 4</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 5</h2>
    </li>
</ul>

Cấu trúc HTML bao gồm chỉ thẻ ul và li. Nhìn sơ qua thì mình chắc mọi người cũng có thể đoán được là thẻ ul có class là tabs dùng để chứa các thẻ li là các Tab mà người dùng sẽ nhắp chọn. Còn thẻ ul có class là tab chứa nội dung tương ứng với các tab đó.

Phần CSS

ul#tabs {
    list-style-type: none;
    padding: 0;
    text-align: center;
}
ul#tabs li {
    display: inline-block;
    background-color: #32c896;
    border-bottom: solid 5px #238b68;
    padding: 5px 20px;
    margin-bottom: 4px;
    color: #fff;
    cursor: pointer;
}
ul#tabs li:hover {
    background-color: #238b68;
}
ul#tabs li.active {
    background-color: #238b68;
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;
}

Đoạn css trên thì có một số điểm nổi bật như này thôi, một là các thẻ li chứa các tab sử dụng CSS property là display: inline-block giúp cho toàn bộ các tab đứng trên cùng 1 hàng. Thứ 2 là toàn bộ các thẻ li chứa nội dung đều sẽ bị ẩn (display: none), và những thẻ li nào có class là active sẽ được hiển thị (display: block).

Tính năng với jQuery

Đây chắc là đoạn code quan trọng nhất giúp toàn bộ mọi thứ hoạt động, nó khá đơn giản thôi cùng xem nhé.

$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});

Đầu tiên chúng ta sẽ lắng nghe mọi hoạt động của toàn bộ các phần tử trên web, khi mà người dùng nhắp chọn vào thẻ li bất kì trong cặp thẻ ul có class là tabs, nếu thẻ nhắp chọn vào đang được mở rồi (có class là active) thì thôi, ngược lại nếu nó không phải thì thêm class là active vào thẻ đó, và tiếp tục tìm đến thẻ li hiện tại đang có class là active và xóa nó đi.

Thế làm sao mà nó biết được nội dung nào tương ứng để thêm class active để hiển thị phần nội dung đó lên? Nó là như thế này, mặc định đầu tiên chúng ta đã dùng jQuery chọn vào tất cả những thẻ li của thẻ ul có class là tabs, trong đoạn mã trên bạn có thể thể thấy var tabNum = $(this).index(), hàm index() là hàm cho chúng ta biết được đó là thẻ li thứ mấy nằm trong thẻ ul mà chúng ta đang chọn, và trong lập trình đương nhiên là số bắt đầu là số 0 chứ không phải số 1, nên chúng ta tạo tiếp 1 biết khác nthChild = tabNum+1 để biết chính xác nó đang nằm ở vị trí nào để chọn vào phần li chứa nội dung tương ứng.

Chúng ta tiếp tục dùng jQuery kết hợp CSS3 để chọn vào đúng thẻ li với thứ tự tương ứng chứa nội dung, và chèn vào class active.

Sử dụng trong bài viết Blogger như thế nào

Mục này mình hướng dẫn cho những bàn nào ko rành chỉ muốn xài thôi cho Blogger, Blogspot nhé. Đầu tiên bạn phải chắc rằng trong template của mình có sử dụng jQuery. Tiếp tục là lúc soạn thảo bài viết các bạn chuyển qua soạn thảo ở chế độ HTML.

Các bạn cho toàn bộ css vào cặp thẻ
<style type="text/css">Phần CSS ở trên vào đây</style>
trong blogspot các bạn có thể thêm vào trước thẻ </head> để đảm bảo không nằm trong bất cứ thẻ nào thuộc phần header
và toàn bộ jQuery vào cặp thẻ
<script type="text/javscript>Toàn bộ nội dung jQuery</script>.
trong mã của blogspot mở phần HTML và thêm vào trước phần ,/header> còn bạn nao không biết thì vào đây
<script> nội dung code java trên </script>
Sửa phần HTML tương ứng với nội dung và tiêu đề các thẻ của bạn là được.

Lời kết
Việc phân chia nội dung theo tab này thì bạn có thể áp dụng để làm nhiều cái như, template cho Blogspot cũng như các mã nguồn khác, hoặc muốn phân chia phần nội dung của mình để người đọc tiếp cận một cách tốt hơn