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:

Tiêu đề


p { cursor: pointer; }
.test { color: blue; }


$[function[]{
    $['p'].click[function[]{
        $[this].toggleClass['test'];
    }]
}];




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:

Tiêu đề


p { cursor: pointer; }
.test { color: blue; }


$[function[]{
    var count = 0;
    $['p'].click[function[]{
        $[this].toggleClass['test', count++ % 3 == 0];
    }]
}];




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:

Tiêu đề


p { cursor: pointer; }
.blue { color: blue; }
.yellow { color: yellow; }


$[function[]{
    $['button'].click[function[]{
        $['p'].toggleClass[function[]{
             if [$[this].parent[].is['.test']] {
                 return 'yellow';
             } else {
                 return 'blue';
             }
        }];
    }]
}];




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'];
    }];
}];