HOME ABOUT CONTACT SITEMAP
Category
This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Friday, 12 October 2018

Simple jQuery multiple tabs


Tabs là 1 thành phần thường thấy trên website và đặc biệt nhiều ở các thiết bị di động. Điểm mạnh của tabs chính là giúp bạn tiết kiệm được rất nhiều không gian hiển thị với nhiều thành phần khác nhau. Trong bài viết này tôi sẽ cùng các bạn tạo multi tab đơn giản dễ hiểu nhờ sử dụng jQuery và CSS

Xem demo  (click vào 1 tab 2 lần để đóng chính nó)

demo

Áp dụng riêng cho blogspot ta có thể dùng nó vào rất nhiều thứ như phân loại widget, tạo list emoticon, nội quy,....

Code trong bài này khá đơn giản nên tôi không giải thích gì thêm.

Theo như demo tôi sẽ có hàng button điều khiển, và hàng nội dung như sau

<ul class="tabs">
    <li class="tab-btn" data-tab="t1">Tab One</li>
    <li class="tab-btn" data-tab="t2">Tab Two</li>
    ...
    <li class="tab-btn" data-tab="tn-1">Tab n-1</li>
    <li class="tab-btn" data-tab="tn">Tab n</li>
</ul>

<div id="t1" class="tab-content">Content 1</div>
<div id="t2" class="tab-content">Content 2</div>
...
<div id="tn-1" class="tab-content">Content n-1</div>
<div id="tn" class="tab-content">Content n</div>

Code css (quan trọng nhất là 2 thuộc tính display được đánh dấu)

/* Required */
.tab-content {
    display: none; /* Important */
    background: #ddd; /* Optional */
    padding: 15px; /* Optional */
}

.tab-content.current {
    display: block; /* Important */
}


/* Optional */
.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.tabs li {
    color: #000;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

.tabs li.current {
    background: #ddd;
    color: #000;
}


Cuối cùng là code jQuery

$(function() {
    $('.tabs li').click(function() {
        var tab_id = $(this).attr('data-tab');
        if ($("#" + tab_id).hasClass('current')) {
            $("#" + tab_id).removeClass('current');
            $(this).removeClass('current');
            return;
        }
        $('.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

Vì tabs này mang tính mở rất cao nên khó để demo một sản phẩm cụ thể nào, nó phụ thuộc vào ý tưởng thiết kế của mỗi người. Với code tabs đơn giản này ta có thể dùng để thay thế cho những plugin cồng kềnh mà các nhà thiết kế template để lại

Chúc bạn thành công !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js