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 !