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

Lời đầu tiên thì xin độc giả thứ lỗi vì đã quá lâu rồi không đăng bài mới, để blog trống không lâu quá chắc nhiều người cũng quên mất mình luôn rồi. Đối với những độc giả thường xuyên của blog mình, về tương lai mình sẽ có gắng sắp xếp thời gian tiếp tục với các bài viết hướng dẫn mọi người về Blogger, lập trình, marketing, adsense,... cũng như giải đáp thắc mắc nhiều hơn cho mọi người nhé.


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ế tiện thể đây mình làm một bài hướng dẫn về vấn đề này. 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


  • Nội dung cho tab 2


  • Nội dung cho tab 3


  • Nội dung cho tab 4


  • Nội dung cho tab 5


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ẻ ulclasstabs 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ẻ ulclass 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ẻ ulclasstabs, 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ó classactive 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>
và toàn bộ jQuery vào cặp thẻ
<script type="text/javscript>Toàn bộ nội dung jQuery</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. Nếu bạn thích bài viết có thể +1, like hoặc comment, hoặc bạn nào không thích hoặc có thắc mắc có thể để lại comment ở dưới cho mình biết lý do hoặc thắc mắc nhé.

P/S: Nếu các bạn muốn mình viết về chủ đề gì tiếp theo có thể tiếp tục liên hệ với mình qua biểu mẫu liên hệ trên website hoặc giửi mail trực tiếp cho mình qua rainbow.lam25@gmail.com. Mình không trả lời inbox facebook nhé nên mọi người đừng nhắn bên đấy nữa T_T

16 bình luận

  1. avatar says

    09:06 Ngày 10 tháng 07 năm 2016

    Xin Lâm! mình xảy ra lỗi tại đây: https://1.bp.blogspot.com/-r-P1JBAhn8M/V4GsiGlfb7I/AAAAAAAAAJQ/lqBEGVE8QxADe9btgIlQGPWSskIRjkTqACKgB/s1600/sai.JPG Bạn giúp mình khắc phục với nhé.
    Đây là template của mình.
    https://drive.google.com/open?id=0B90aa-7N7l25SG12TEJHdndNT28
    Thân!

  2. avatar says

    09:13 Ngày 10 tháng 07 năm 2016

    Xin lỗi là ảnh này, mình chụp sai: https://drive.google.com/file/d/0B90aa-7N7l25QzhoNU52VlpmU3M/view?usp=sharing

  3. avatar says

    10:56 Ngày 10 tháng 07 năm 2016

    Nếu bạn muốn chèn trực tiếp vào template luôn thì bạn chèn như thế này nhé
    <script type='text/javascript'>
    //<![CDATA[
    Nội dung đoạn script trên.
    //]]>
    </script>

  4. avatar says

    12:24 Ngày 10 tháng 07 năm 2016

    Mình làm và vẫn sai ở đâu đó.
    Bạn xem qua được không, cám ơn! http://testtabalo.blogspot.com/2016/07/test-tab.html Đã mời qua mail. https://drive.google.com/open?id=0B90aa-7N7l25dlRTd1kwbmhCMHM . Cám ơn

  5. avatar says

    13:15 Ngày 10 tháng 07 năm 2016

    Bạn tìm trong template của bạn
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
    chèn script vào dưới nó nhé đừng chèn bên trên là nó sẽ chạy bình thường.

  6. avatar says

    17:03 Ngày 10 tháng 07 năm 2016

    Cám ơn bạn! bộ code tab mới này rất hoàn hảo!

  7. avatar says

    15:08 Ngày 18 tháng 07 năm 2016

    Chào mừng trở lại, đúng lúc có cái này cần nhờ Nâm xem giúp :(

    Ko biết thằng google nó mới sửa cái j mà blog mình bị lỗi này:
    Cứ thêm chú thích vào ảnh là size ảnh cố định luôn, ko responsive đc, có ảnh vượt quá cả khung max width of temp luôn :(

    http://www.duyblog.com/2015/08/tam-phao-5.html

  8. avatar says

    15:35 Ngày 19 tháng 07 năm 2016

    Xưa giờ hình như nó vẫn vậy ấy bác Duy ơi, đặc biết là trên firefox thêm chú thích vào nó còn kinh khủng hơn nữa.

    P/S: Không hiểu sao bác comment em chã bao giờ thấy email báo có comment mới @_@

  9. avatar says

    22:07 Ngày 23 tháng 07 năm 2016

    Lâu lắm rồi mới thấy lâm trở lại với bài viết này, thỉnh thoảng vẫn vào blog của lâm nhưng tưởng là chủ nhà đóng cửa chuyển nhà rồi cơ

  10. avatar says

    14:12 Ngày 01 tháng 08 năm 2016

    Việc nhiều quá cũng tính nghỉ hưu, mà thôi cố gắng :D

  11. avatar says

    17:29 Ngày 02 tháng 08 năm 2016

    Bài hướng dẫn rất chi tiết. Cảm ơn ad nhiều. Mình làm thử trên site này xem sao http://tribenhtri.us.

  12. avatar says

    23:41 Ngày 23 tháng 08 năm 2016

    7 tháng trời mới có bài mới :)

  13. avatar says

    08:26 Ngày 24 tháng 08 năm 2016

    Dạo này bận quá với bên blogspot cũng ít ý tưởng :D

  14. avatar says

    08:19 Ngày 13 tháng 10 năm 2016

    Bạn ơi, cái này nếu mình embed video vào thì khi mình play video A, xong chuyển sang tab khác play video B nhưng nó lại không tắt video A. Mình phải làm sao nhỉ?

  15. avatar says

    10:03 Ngày 13 tháng 10 năm 2016

    Đúng rồi bạn, cái này chỉ ẩn hiện các tab khi click thôi. Nếu bạn muốn dừng video thì phải code thêm 1 ít nữa. Thông thường bạn nhúng video như thế nào, bạn có link demo không?

  16. avatar says

    07:53 Ngày 09 tháng 11 năm 2016

    blogspot giờ seo ngon không biết, sao thằng google nó không làm lại mấy cái url chuân một tí nhỉ .

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.