Trình xử lý nhấp chuột chỉ dành cho CSS sử dụng: target Pseudo-Class (Không có JavaScript)
Thường có một điểm khi bạn đang xây dựng một trang web, đặc biệt là một trang đích đơn giản, khi bạn nhận ra rằng bạn sẽ phải giới thiệu một số JavaScript. Tuy nhiên, CSS thường có thể làm được nhiều hơn những gì ta ghi nhận. Ở đây ta sẽ xem xét việc tạo trình xử lý nhấp chuột chỉ với CSS! 🔥
Giả sử ta đang xây dựng trang đích HTML và CSS và ta quyết định ta muốn có "Xem thêm!" để hiển thị một phần văn bản. Ngay khi ta nghĩ đến một sự kiện nhấp chuột, thông thường nó sẽ dẫn ta đến một từ: JavaScript.
Là nhà phát triển web, hầu hết ta đều dành nhiều thời gian cho JavaScript– và điều đó thật tuyệt! Tuy nhiên, có rất nhiều thứ ta có thể làm chỉ với CSS mà ta có thể không biết! 💅
CSS Pseudo-Class: target
Có rất nhiều lớp giả trong CSS có thể giúp ta tạo kiểu các phần tử ở các trạng thái khác nhau. Ví dụ: bạn có thể tạo kiểu cho một nút khi nó được di chuột qua, đang hoạt động, có tiêu điểm, v.v.
Tuy nhiên, một lớp giả mà bạn có thể chưa từng nghe đến là :target pseudo-class.
Lớp giả :target được sử dụng để chọn một phần tử khi ID của phần tử đó trùng với một phần của URL hiện tại.
Khi nào ID của một phần tử sẽ trùng với một URL?
Một trường hợp sử dụng phổ biến để có ID của phần tử hiển thị trong URL là nếu bạn đang sử dụng thẻ liên kết ( <a> ) để chuyển đến một vị trí cụ thể trên trang hiện tại. Ví dụ: nếu đó là trang web cá nhân của bạn, bạn có thể có nút "Liên hệ" ở đầu trang. Khi nhấp chuột, nó có thể đưa user đến chân trang để xem tất cả thông tin liên hệ của bạn.
Sử dụng thẻ neo để chuyển vị trí trên trang
Nếu bạn đã sử dụng thẻ <a> trước đây, có thể bạn đã quen thuộc với thuộc tính href . Nếu bạn đang cố gắng liên kết đến một trang web, như Alligator.io chẳng hạn, bạn sẽ tạo liên kết trong HTML của bạn như sau:
<a href='https://alligator.io'> Click me! 🐊 </a> Tuy nhiên, nếu bạn muốn user của bạn ở lại trang hiện tại và nhảy xuống chân trang, chẳng hạn, tất cả những gì bạn phải làm là đặt một ID trên chân trang và sử dụng ID đó cho giá trị href trong thẻ <a> .
<a href='#footer'> Go to the footer! </a> Khi user nhấp vào liên kết chân trang này, trang sẽ chuyển đến chân trang và URL hiện tại của họ sẽ được cập nhật giống như sau:
https://www.imawebsite.com/#footer ID của phần tử chân trang hiện là một phần của URL hiện tại. Nói cách khác, đó là mục tiêu! 🤓
Tạo Trình xử lý nhấp chuột với: target
Bây giờ ta đã biết cách tạo mục tiêu bằng HTML, làm cách nào để sử dụng mục tiêu đó để tạo trình xử lý nhấp chuột mà không cần bất kỳ JavaScript nào? Rất may, nó chỉ cần một chút CSS! 🌈
Sử dụng "Xem thêm!" nút ví dụ ở trên, hãy bắt đầu bằng cách tạo liên kết để xem thêm văn bản:
<a href='#seeMore'> See more! </a> Phần văn bản mà ta muốn xem chưa tồn tại, vì vậy hãy tạo phần đó.
<a href='#seeMore'> See more! </a> <section id='seeMore'> <p> Here's some more info that you couldn't see before. I can only be seen after you click the "See more!" button. </p> </section> Khi bạn nhấp vào nút "Xem thêm!" , URL sẽ cập nhật trông giống như sau:
https://www.imawebsite.com/#seeMore Vấn đề ta gặp phải bây giờ là phần #seeMore hiển thị cho user mặc dù nó chưa được cho là có! 🙈
Vì đây là tất cả HTML mà ta cần cho đến nay, hãy thêm CSS của ta để quản lý việc hiển thị khối văn bản khi nhấp chuột.
Đầu tiên, hãy ẩn phần văn bản chưa hiển thị.
<style> #seeMore { display: none; } </style> Như vậy, văn bản trong phần #seeMore không hiển thị khi tải hoặc khi bạn nhấp vào nút "Xem thêm!" cái nút. Đây là nơi xuất hiện :target style. Hãy sử dụng :target pseudo-class để cập nhật kiểu khi "Xem thêm!" nút được nhấp.
<style> #seeMore { display: none; } #seeMore:target { display: block; } </style> 
Nó thực sự là đơn giản như vậy! Khi tải, phần văn bản của ta sẽ không hiển thị. Ngay sau khi bạn nhấp vào nút "Xem thêm!" , nó sẽ thêm #seeMore vào URL và phần #seeMore trở thành mục tiêu. Khi #seeMore trở thành mục tiêu, nó sẽ được áp dụng :target style, sẽ hiển thị văn bản. 🥳
Sử dụng: target để chuyển đổi màn hình
Nếu một phần tử không hiển thị ngay từ đầu, bạn có thể sẽ muốn tùy chọn ẩn nó .
May mắn là ta có thể làm điều đó chỉ với một dòng HTML nữa (không có CSS!) 💪
Sử dụng ví dụ tương tự như trên, hãy mở rộng HTML để bao gồm nút “Ẩn văn bản”.
<a href='#seeMore'>See more!</a> <section id='seeMore'> <p> Here's some more info that you couldn't see before. I can only be seen after you click the "See more!" button. </p> <a href='#'>Hide text</a> </section> Lưu ý có một thẻ <a> mới trong phần văn bản. Vì nó nằm trong phần tử chỉ hiển thị khi user nhấp vào “Xem thêm!”, Nút “Ẩn văn bản” sẽ chỉ hiển thị nếu văn bản ẩn trở nên hiển thị. Tức là user không cần phải nhìn thấy nút để ẩn văn bản trừ khi có văn bản để ẩn.
Giá trị href trên nút “Ẩn văn bản” là “#”. Điều này là do ta muốn cập nhật URL để không còn bao gồm #seeMore . Khi nhấp vào nút “Ẩn văn bản”, nó sẽ cập nhật URL để trông giống như sau:
https://www.imawebsite.com/# Với URL được cập nhật, #seeMore không còn là mục tiêu nữa và kiểu #seeMore:target không còn được áp dụng nữa. Do đó, khối văn bản (bao gồm cả nút “Ẩn văn bản”) sẽ quay trở lại chế độ display: none; đã áp dụng kiểu dáng.
Tóm lại, hãy cập nhật URL và văn bản ban đầu không được hiển thị sẽ trở lại không được hiển thị. Ta chính thức có cách để chuyển đổi văn bản! ✨
Ví dụ về Khi nào sử dụng: target
Nếu bạn không chắc khi nào mình thực sự sử dụng :target pseudo-class, thì đây là một số ví dụ về cách bạn có thể:
- Nhấp vào biểu tượng bánh hamburger để hiển thị menu chuyển của trang web . Bao gồm một biểu tượng để đóng chuyển .
- Nhấp vào một biểu tượng để hiển thị một phương thức. (Lưu ý: Đảm bảo rằng các phương thức của bạn có thể truy cập được nếu bạn định sử dụng chúng! 🤓)
- Cập nhật kiểu b hiện được chọn trong thanh chuyển của bạn khi nó được nhấp vào.
Hỗ trợ trình duyệt
Việc hỗ trợ trình duyệt cho :target pseudo-class thật tuyệt vời và về cơ bản bạn không cần phải lo lắng về điều đó trừ khi bạn đang hỗ trợ IE8. Tuy nhiên, như mọi khi, hãy kiểm tra Tôi có thể sử dụng để chắc chắn. 🚀
Các tin liên quan
Giới thiệu về Tailwind CSS2019-08-13
Hiểu CSS Float
2019-06-07
Giới thiệu về Bulma CSS với React
2018-10-12
Media query CSS: Tham khảo và hướng dẫn nhanh
2018-06-07
Mẹo CSS: Bóng đổ nhiều màu & cắt bỏ
2018-04-02
Cách hiện đại để xử lý CSS trong React
2018-02-22
CSS-in-JS Roundup: Tạo kiểu cho các thành phần React
2017-08-21
Đặt lại CSS tối thiểu
2017-06-21
Hàm CSS color-mod
2017-01-12
CSS Grid: Holy Grail Layout
2016-12-28
