Lọc nội dung chỉ với css

Có khi nào chúng ta nghĩ tới việc lọc nội dung mà chỉ cần sử dụng css, ko cần sự hỗ trợ từ js, có vẻ hơi hoang đường 😀

Bằng cách sử dụng thuộc tính css :target chúng ta có thể tìm ra những gì người dùng nhấp vào.

Mọi thứ sẽ xảy ra trong element này :

<section class="c-filter">...</section>

Liệt kê các mục tiêu và gán mục tiêu cho các bộ lọc cụ thể bằng cách sử dụng ID để gán

<a class="c-filter__target" id="tag:css"></a>
<a class="c-filter__target" id="tag:html"></a>
<a class="c-filter__target" id="tag:accessibility"></a>
<a class="c-filter__target" id="tag:performance"></a>
<a class="c-filter__target" id="tag:vim"></a>

Sau đó là các liên kết lọc mà người dùng sẽ chọn:

<nav class="c-filter__links">
  <a href="#tag:all" class="c-filter__link  c-filter__link--reset">Reset</a>
  <a href="#tag:html" class="c-filter__link">HTML</a>
  <a href="#tag:css" class="c-filter__link">CSS</a>
  <a href="#tag:accessibility" class="c-filter__link">Accessibility</a>
  <a href="#tag:performance" class="c-filter__link">Performance</a>
  <a href="#tag:vim" class="c-filter__link">Vim</a>
</nav>

Tổng quan quá trình sẽ diễn ra như sau:

  1. Hiển thị tất cả nội dung
  2. Người dùng nhấp vào liên kết lọc sẽ nhảy tới #tags: * neo, gắn thêm một mã định danh vào URL.
  3. Chúng ta sẽ lấy giá trị của mã định danh phân đoạn bằng cách sử dụng bộ chọn giả :target
  4. Tiếp đó là sử dụng css để ẩn hiện những nội dung liên quan

Nó đây:

See the Pen Css filter by Cong (@kcnguyen) on CodePen.

Chi tiết xem thêm tại đây

Leave a Reply

Your email address will not be published. Required fields are marked *