Tìm hiểu addClass(), removeClass() và toggleClass() qua ví dụ thực tế

Demo: Các bạn bấm nút Ẩn sidebar bên trái màn hình khi cuộn xuống nhé (không hiển thị trên mobile)

Tìm hiểu addClass, removeClass và toggleClass
Tìm hiểu addClass, removeClass và toggleClass

Trong thiết kế website, 3 hàm addClass(), removeClass()toggleClass() được sử dụng phổ biến để tạo ra nhiều chức năng khác nhau. Việc hiểu và áp dụng 3 hàm này vào lập trình website sẽ trở nên dễ dàng khi có ví dụ đi kèm. Vậy nên hôm nay, mình đã viết bài này để giúp các bạn hiểu và tiếp thu được phần nào. Hãy cùng mình tìm hiểu nhé.

Tìm hiểu addClass(), removeClass() và toggleClass()

1. addClass()

Mục đích: thêm class vào phần tử chỉ định.

Giả sử mình có 1 ví dụ như sau:

HTML

<div class="p1">
    PCDevShare.Com chào mừng các bạn đến với website mình.
</div>

CSS

.p1 {
    text - transform: uppercase;
    font - size: 2 rem;
    font - weight: 700;
    cursor: pointer;
}
.red {
    color: red;
}

Jquery

$(document).ready(function() {
    $(".p1").click(function() {
        $(this).addClass("red");
    });
});

Về HTML thì không có gì, chỉ là khởi tạo và show ra trình duyệt dòng chữ “PCDevShare.Com chào mừng các bạn đến với website mình.” thôi. Riêng với CSS, ở đây bạn để ý ngoài chỉnh sửa cho class .p1 thì mình có thêm 1 class nữa là .red để dùng cho Jquery phía dưới.

Nguyên tắc hoạt động: khi click vào dòng chữ trên thì chính nó sẽ nhận thêm 1 class nữa là .red (có tác dụng làm chữ chuyển màu đỏ).

Kết quả:

PCDevShare.Com chào mừng các bạn đến với website mình.

2. removeClass()

Mục đích: ngược lại so với addClass() thì hàm này sẽ là loại bỏ class khỏi phần tử chỉ định.

Cùng tìm hiểu ví dụ đơn giản sau:

HTML

<div class="p1 red">
    PCDevShare.Com chào mừng các bạn đến với website mình.
</div>

CSS

.p1 {
    text - transform: uppercase;
    font - size: 2 rem;
    font - weight: 700;
    cursor: pointer;
}
.red {
    color: red;
}

Jquery

$(document).ready(function() {
    $(".p1").click(function() {
        $(this).removeClass("red");
    });
});

Kết quả:

PCDevShare.Com chào mừng các bạn đến với website mình.

3. toggleClass()

Mục đích: hàm này là sự kết hợp giữa 2 hàm trên là addClass()removeClass(). Hàm toggleClass() vừa có thể thêm và loại bỏ class khỏi phần tử chỉ qua mỗi cú click chuột.

Tìm hiểu cùng mình qua ví dụ sau:

HTML

<div class="p1">
    PCDevShare.Com chào mừng các bạn đến với website mình.
</div>

CSS

.p1 {
    text - transform: uppercase;
    font - size: 2 rem;
    font - weight: 700;
    cursor: pointer;
}
.red {
    color: red;
}

Jquery

$(document).ready(function() {
    $(".p1").click(function() {
        $(this).toggleClass("red");
    });
});

Nguyên lí hoạt động: bạn có thể thấy rằng khi ta click vào vào dòng chữ “PCDevShare.Com chào mừng các bạn đến với website mình.” nó sẽ nhận class .red để chuyển thành màu đỏ và khi click lại thì dòng chữ đó sẽ loại bỏ class .red để quay lại màu ban đầu.

Kết quả:

PCDevShare.Com chào mừng các bạn đến với website mình.

Tổng quan chung về 3 hàm

Qua 3 ví dụ trên, mình chỉ muốn các bạn hiểu và biết cách để sử dụng mỗi hàm vào từng chức năng cụ thể. Có lúc sẽ chỉ dùng addClass(), removeClass() hoặc cũng có lúc ta bắt buộc dùng đến toggleClass() (hàm này khá phổ biến). Ngay trong ví dụ áp dụng tổng thể dưới đây, mình cũng sẽ dùng toggleClass() để làm chức năng ẩn hiển Sidebar ở mỗi website bạn từng gặp nhé.

Tạo chức năng ẩn hiện Sidebar bằng hàm toggleClass()

Ví dụ mình có 1 giao diện dựng đơn giản như sau:

HTML

<div class="container">
    <div class="main">
        Main
    </div>
    <div class="sidebar">
        Sidebar
    </div>
    <button>Show/Hide Sidebar</button>
</div>

CSS

.main, .sidebar {
    text - transform: uppercase;
    font - size: 1 rem;
    font - weight: 700;
    display: inline - block;
    height: 200 px;
    position: relative;
    color: #fff;
    text - align: center;
}
.main {
    width: 70 % ;
    background: red;
    float: left;
}
.sidebar {
    width: 30 % ;
    background: green;
}
.main.active {
        width: 100 % ;
    }
    .sidebar.active {
        display: none;
    }
button {
    margin - top: 2 rem;
}

Jquery

$(document).ready(function() {
    $("button").click(function() {
        $(".main, .sidebar").toggleClass("active");
    });
});

Nguyên tắc hoạt động: khi click vào button Ẩn/ Hiện Sidebar thì sẽ thêm class .active vào .main.sidebar. Bạn có thể để ý CSS thì .main.active sẽ tăng width lên 100% còn .sidebar.active sẽ là ẩn sidebar đi với thuộc tính display: none. Và khi click lại button đó thì sẽ xóa class .active khỏi .main.sidebar đúng như chức năng của 2 hàm addClass()removeClass() mình đã nói ở phía trên. Như vậy là các bạn cũng hiểu về cách thức để làm ẩn/ hiện sidebar rồi đúng không?!
Kết quả:

Main

Lời kết

Khi đã hiểu được bản chất và cách dùng 3 hàm addClass(), removeClass()toggleClass() thì mình nghĩ bạn sẽ áp dụng được vào rất nhiều việc đấy. Điển hình mình có thể kể đến như làm ẩn/hiện sidebar, tạo menu xuất hiện từ phải qua hay hiệu ứng tắt/ bật đèn cho website chẳng hạn. Nếu cảm thấy chưa thực sự hiểu rõ phần nào thì cứ để lại bình luận, mình sẽ giải đáp tận tình nhé. Hãy chia sẻ bài viết nếu bạn thấy nó có ích giúp mình nha.

Created by: PCDevShare.Com

23
Bình luận

avatar
8 Comment threads
15 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
8 Số người bình luận
Quốc Bảo BlogCuong NguyenNguyễn Lương DuyNguyễn PhúNguyen Dien Người mới bình luận
  Đăng kí  
mới nhất cũ nhất nhiều vote nhất
Nhận thông báo từ
Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

à em hiểu rồi anh :p cảm ơn anh nha

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

cái hiệu ứng toolip ở phần cmt nó giống bên phần lk không anh

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

dạ đc ời anh

TTB | 1 comments
Khách
TTB | 1 comments

Hi

Nguyễn Lương Duy | 6 comments
Khách
Nguyễn Lương Duy | 6 comments

Đúng chuẩn cái em đang tìm luôn :3

Lò Bát Quái | 2 comments
Khách
Lò Bát Quái | 2 comments

giờ anh viết blog = wp để kiếm tiền hả

Lò Bát Quái | 2 comments
Khách
Lò Bát Quái | 2 comments

chúc anh thành công với blog mới nha <3

Trần Nhật Sinh | 11 comments
Khách
Trần Nhật Sinh | 11 comments

Cảm ơn a

Nguyen Dien | 3 comments
Khách
Nguyen Dien | 3 comments

Ad cho e hỏi có đoạn js nào mà tự chuyển title thành tooltip không ạ

Nguyen Dien | 3 comments
Khách
Nguyen Dien | 3 comments

à e hiểu r thank a

Nguyễn Phú | 3 comments
Khách
Nguyễn Phú | 3 comments

😀 cái liên kết bạn bè bên a dùng được bên blogspot đc không nhỉ?

Nguyễn Lương Duy | 6 comments
Khách
Nguyễn Lương Duy | 6 comments

Anh cập nhật lại giúp em liên kết với anh!
Title: Duy Blogs
Url: https://www.duyblogs.com/