[Bài 2] Tạo tabs đơn giản bằng jquery

Bạn đang ở bài 2 trong 7 bài của serie Bài tập jquery.

bài trước chúng ta đã làm quen với một tính năng đơn giản là check, uncheck tất cả checkbox. Trong bài này chúng ta tiếp tục với bài tập tạo tabs đơn giản bằng jquery. Tính năng này thường được sử dụng để tiết kiệm diện tích cho website, bởi vì nó sẽ ẩn bớt đi những thành phần chưa cần phải hiển thị ra.

tabs

Yêu cầu:

Tạo ra các tab với mỗi tab khi click vào sẽ chứa một nội dung khác nhau và chỉnh sửa css để phân biệt giữa tab đang chọn và các tab khác.

Phân tích:

Cần xác định được tab khi tab đó đang được click để hiển thị cho đúng nội dung của tab đó và khi thay đổi tab thì phải thay đổi css đi kèm và hiện nội dung tương ứng.

Code:

<script>
$(document).ready(function() {
  $(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn(); }); });
</script>

Demo

Giải thích:

Khi click vào thẻ a thì tìm thẻ cha của nó là thẻ li để thêm vào class current.

Phương thức siblings(): sẽ tìm ra các thẻ cùng cấp (hiểu nôm na là anh chị em ruột) để bỏ class current.

Phương thức not(): nếu không phải là tab đang chọn thì css cho nó ẩn đi.

Phương thức fadeIn(): tạo hiệu ứng xuất hiện nội dung trong tab.

Kết luận:

Như vậy là chúng ta đã hoàn thành việc tạo tabs đơn giản bằng jquery. Với một chút css thì chúng ta có thể làm cho tab này đẹp hơn nữa. Hy vọng bài tập này sẽ giúp các bạn dễ dàng tạo tab cho riêng mình. Trong thực tế thì có nhiều giao diện xây dựng sẵn hay các plugin hỗ trợ việc tạo tabs rất đẹp mà bạn có thể lấy sẵn ra xài. Tuy nhiên ở mức độ đơn giản và để nắm bắt kiến thức về jquery thì việc tự tạo tabs cũng giúp ích cho chúng ta rất nhiều đấy.

[Bài 2] Tạo tabs đơn giản bằng jquery
4.7 (93.33%) 3 votes

Bình luận

1 Bình luận on "[Bài 2] Tạo tabs đơn giản bằng jquery"

Thông báo
avatar
Sắp xếp:   Mới nhất | Cũ nhất | Bình chọn nhiều
trackback

[…] bài trước chúng ta đã tìm hiểu việc tạo một tabs đơn giản bằng jquery. Ở bài hôm nay […]

wpDiscuz