Các Trang Mẫu Web
Thủ thuật và lời khuyên CSS

Giả lớp ':target'

Một địa chỉ URL thường chỉ đến một trang. Nhưng khi địa chỉ URL kết thúc trong "#something" nó chỉ đến một thành phần cụ thể trong trang đó. Các trình duyệt điển hình cố gắng làm chắc chắn rằng các thành phần đích được hiển thị và nếu có thể sẽ hiển thị ở phía trên màn hình.

Với bộ chọn ':target', bạn có thể thêm một mẫu cụ thể vào thành phần đích, như vậy nó sẽ được chú ý hơn.

Nhưng bạn có thể làm hơn thế nữa. Bạn có thể làm ẩn hoặc hiển thị các thành phần dựa trên thành phần đó có phải là địa chỉ đích hay không. Dưới đây là một ví dụ. Nó chỉ ra rằng một bảng chọn nhỏ với 4 mục chọn và mỗi mục được liên kết tới một số đoạn văn. Nhưng ban đầu văn bản không được hiển thị. Mỗi mục là một liên kết tới một thành phần với một địa chỉ ID đích (#item1, #item2...) và các thành phần này chỉ hiển thị khi chúng là đích của địa chỉ URL hiện hành.

Hãy thử bấm chuột vào các mục trên bảng chọn và cũng quan sát vị trí của thanh trình duyệt để xem địa chỉ URL hiện tại.

Đây là cách nó hoạt động như thế nào. Có hai phần quan trọng, nguồn HTML và thuộc tính 'display'. Đầu tiên là văn bản HTML. Nó có một số liên kết và một số thành phần với các ID tương ứng:

<p>  <a href="#item1">item 1</a>  <a href="#item2">item 2</a>  <a href="#item3">item 3</a>  <a href="#default">clear</a><div class="items">  <p id="item1">... item 1...  <p id="item2">... item 2...  <p id="item3">...  <p id="default"><!-- by default, show no text --></div>

Các quy tắc mẫu đầu tiên làm ẩn tất cả các thành phần P bên trong thẻ DIV, nhưng sau đó ghi đè lên thành phần P là đích của địa chỉ hiện tại:

div.items p {display: none}div.items p:target {display: block}

Tất cả chỉ có vậy. Ví dụ trên dẫn tới việc thêm một số màu, lề, đường biên, …, vì vậy nó trông giống một bảng chọn hơn. Bạn có thể xem nguồn của trang này để biết nó được làm như thế nào.

Trên thực tế, chúng ta đã thêm thuộc tính ':not(:target)', để đảm bảo rằng chỉ các trình duyệt CSS3 sẽ ẩn thành phần này. Vì vậy các quy tắc tốt hơn là:

div.items p:not(:target) {display: none}div.items p:target {display: block}

Giao diện tab

Một khi bạn hiểu vấn đề ở trên, thì sẽ không quá khó để tạo một giao diện "tab" thực sự: một tập các quy tắc mẫu không những hiển thị nội dung khác nhau dựa trên nút được bấm, mà còn thay đổi diện mạo của chính bản thân nút đó.

Đây là một ví dụ. Nó không dùng thuộc tính 'display: none' mà dùng 'z-index'. Nếu bạn muốn nó hoạt động như thế nào, chỉ cần "view source"…

Lời cảm ơn

Trang này dựa trên một ý tưởng ban đầu của Daniel Glazman.. Xem lời giải thích trong "blog" của ông ngày 9/1/2003 và đoạn demo ngày 13/1.