Làm chủ Highlight Div onClick với jQuery

Highlight div khi click chuột là một kỹ thuật phổ biến trong thiết kế web, giúp tăng trải nghiệm người dùng bằng cách làm nổi bật phần tử được chọn. jQuery, với cú pháp đơn giản và mạnh mẽ, cung cấp nhiều cách tiếp cận để thực hiện điều này một cách hiệu quả. Bài viết này sẽ hướng dẫn bạn cách highlight div onClick sử dụng jQuery, từ cơ bản đến nâng cao, giúp bạn dễ dàng áp dụng vào dự án của mình.

Các phương pháp Highlight Div onClick với jQuery

Có nhiều cách để highlight một div khi click bằng jQuery. Dưới đây là một số phương pháp phổ biến và hiệu quả:

Sử dụng phương thức .addClass(): Đây là cách đơn giản và được sử dụng rộng rãi nhất. Bạn chỉ cần thêm một class CSS với định dạng highlight (ví dụ: thay đổi màu nền, màu chữ,…) vào div khi nó được click.
Sử dụng phương thức .css(): Phương thức này cho phép bạn thay đổi trực tiếp các thuộc tính CSS của div khi click. Bạn có thể thay đổi màu nền, màu chữ, border, v.v.
Sử dụng phương thức .toggleClass(): toggleClass() cho phép bạn thêm hoặc xóa một class CSS tùy thuộc vào trạng thái hiện tại của div. Nếu class đã tồn tại, nó sẽ bị xóa; nếu chưa tồn tại, nó sẽ được thêm vào. Điều này hữu ích khi bạn muốn chuyển đổi giữa trạng thái highlight và trạng thái bình thường khi click.

Hướng dẫn từng bước Highlight Div với jQuery

Dưới đây là ví dụ cụ thể sử dụng .addClass() để highlight div khi click:

Thêm jQuery vào project: Đảm bảo bạn đã thêm thư viện jQuery vào trang HTML của mình. Bạn có thể sử dụng CDN của jQuery hoặc tải xuống và lưu trữ cục bộ.
Tạo div cần highlight: Tạo một div trong HTML và đặt id hoặc class cho nó để dễ dàng chọn lựa bằng jQuery.
Viết code jQuery: Sử dụng đoạn code jQuery sau để thêm class highlight khi div được click:

$(document).ready(function() {
  $("#myDiv").click(function() {
    $(this).addClass("highlight");
  });
});

Trong đoạn code trên, #myDiv là selector để chọn div có id là myDiv. .click() là hàm xử lý sự kiện click. $(this) tham chiếu đến div được click, và .addClass("highlight") thêm class highlight vào div đó.

Tạo class CSS: Tạo class CSS highlight với các thuộc tính định dạng highlight mong muốn. Ví dụ:

.highlight {
  background-color: yellow;
}

Highlight nhiều Div và Xóa Highlight

Bạn có thể dễ dàng mở rộng kỹ thuật này để highlight nhiều div cùng lúc bằng cách sử dụng selector phù hợp. Ví dụ, nếu bạn muốn highlight tất cả các div có class là “clickable”, bạn có thể sử dụng selector $(".clickable").

Để xóa highlight, bạn có thể sử dụng phương thức .removeClass("highlight"). Kết hợp với .toggleClass(), bạn có thể tạo hiệu ứng chuyển đổi highlight khi click.

$(document).ready(function() {
  $(".clickable").click(function() {
    $(this).toggleClass("highlight");
  });
});

Kết luận

Sử dụng jQuery để highlight div onClick là một kỹ thuật đơn giản nhưng hiệu quả để cải thiện trải nghiệm người dùng trên website. Với các phương pháp và ví dụ được trình bày trong bài viết này, bạn có thể dễ dàng áp dụng và tùy chỉnh highlight div onClick với jQuery để phù hợp với nhu cầu của dự án.

FAQ

Tôi có thể sử dụng JavaScript thuần thay vì jQuery được không?
Làm thế nào để highlight nhiều div cùng lúc?
Làm sao để xóa highlight khi click vào div khác?
Tôi có thể thay đổi thuộc tính CSS nào khi highlight?
Có cách nào để tạo hiệu ứng chuyển đổi mượt mà khi highlight không?
Làm thế nào để highlight div khi hover chuột?
Tôi cần thêm thư viện nào để sử dụng jQuery?

Mô tả các tình huống thường gặp câu hỏi

Người dùng thường gặp khó khăn khi muốn highlight nhiều div cùng lúc, xóa highlight khi click vào div khác, hoặc tạo hiệu ứng chuyển đổi mượt mà. Bài viết đã giải đáp các vấn đề này.

Gợi ý các câu hỏi khác, bài viết khác có trong web.

Bạn có thể tìm hiểu thêm về các kỹ thuật jQuery khác trên website BÓNG ĐÁ GOXPLORE.