Bài 6: phương thức toggle() và toggleClass()

Đăng bởi Neo trong mục Hướng dẫn vào 27 tháng 3, 2010 | Comments

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

<div id="box"></div>
<a href="#">Click Me</a>
<p>phương thức toggle() và toggleClass()</p>
<p>phương thức toggle() và toggleClass()</p>
<p>phương thức toggle() và toggleClass()</p>
<p>phương thức toggle() và toggleClass()</p>

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

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter