Hướng dẫn toggle class javascript

• Trang chủ
• Tham khảo
• jQuery
• jQuery - function
• .toggleClass()

Định nghĩa và sử dụng

• .toggleClass(): Thêm hoặc loại bỏ một hoặc nhiều class của thành phần.
• Việc thêm hoặc loại bỏ class được luân phiên nhau giữa các lần action (VD action Click).

Cấu trúc

• Đã được thêm vào từ phiên bản 1.0

• Đã được thêm vào từ phiên bản 1.3

• Đã được thêm vào từ phiên bản 1.4

.toggleClass([switch])

.toggleClass(Tên class)

Html viết:

Thành phần p
Thành phần p
Thành phần p
Thành phần p

Hiển thị trình duyệt:

Click nhiều lần vào các thành phần p, ta sẽ thấy class thay đổi luân phiên giữa các lần click.

So sánh code HTML trước và sau khi có jQuery:

.toggleClass(switch)

Html viết:

Thành phần p
Thành phần p
Thành phần p
Thành phần p

Hiển thị trình duyệt:

Với cách sử dụng bên trên, các lần thay đổi luân phiên sẽ là 3 lần click.

So sánh code HTML trước và sau khi có jQuery:

.toggleClass(function(){...})

Html viết:

Thành phần p
Thành phần p
Thành phần p
Thành phần p
Click

Hiển thị trình duyệt:

Click luân phiên vào button để thấy hiệu ứng.

So sánh code HTML trước và sau khi có jQuery:

Bài này chúng ta sẽ tìm kiểu kỹ hơn về toggle() và toggleClass(), 2 phương thức giúp bạn chuyển đổi hiệu ứng/class của element trên trang web.

Mã CSS sẽ sử dụng trong bài hướng dẫn

#box 
{
	width: 200px;
	height: 200px;
	background: red;
}

.highlight 
{
	background: yellow;
}

Và mã HTML

Click Me
phương thức toggle() và toggleClass()
phương thức toggle() và toggleClass()
phương thức toggle() và toggleClass()
phương thức toggle() và toggleClass()

toggle()

Chúng ta sẽ dùng toggle() để khi người dùng click vào thẻ a, #box sẽ bị ẩn đi:

$(function() {
    $('a').click(function() {
        $('#box').toggle();
    });
});

Bạn có thể đặt thời gian ẩn/hiện #box: $('#box').toggle(3000);

toggleClass()

toggleClass() giúp bạn thay đổi class khi click vào thẻ. Ví dụ trên, với class .highlight chúng ta khai báo mầu nền là màu vàng, áp dụng khi click vào thẻ p như sau:

$(function() {
    $('p').click(function() {
        $(this).toggleClass('highlight');
    });
});