Các đường link với dấu # theo sau cho phép ta nhảy tới một thành phần trong trang HTML, thành phần đó được gọi là target element.
Thành phần với id là para-1 đang được nhảy đến. para-1 được gọi là hash
:target
là một selector của CSS3, cho phép ta style cho target element hiện tại.
<a href="#content">Bấm vào đây</a> <p id="content"> Đây là nội dung chính </p>
:target { background: orange; color: white; }
Ở ví dụ trên khi bấm vào liên kết, background và màu chữ của thẻ p#content
sẽ thay đổi.
Nên sử dụng :target
khi nào?
Khi bạn muốn style theo từng trạng thái của trang web. Bạn cũng có thể dùng javascript và gắn nhiều class cho các element để được kết quả tương tự, tuy nhiên có một chút khác biệt. :target
nên được sử dụng khi:
- Style theo từng trạng thái của trang web
- Chấp nhận cách “nhảy trang” khi thay đổi hash
- Việc chuyển trạng thái được lưu vào history của trình duyệt
Demo
Giả sử trang web của tôi có ba đoạn văn bản, và ba nút bấm để đi tới từng đoạn văn bản đó. Tôi muốn khi nhảy đến đoạn văn bản nào thì đoạn đó sẽ được nổi bật lên.
Code HTML:
<ul class="links"> <li><a href="#para-1">1</a></li> <li><a href="#para-2">2</a></li> <li><a href="#para-3">3</a></li> </ul> <div id="para-1"> <h3>This is paragraph 1</h3> <p>Lorem ipsum dolor sit...</p> </div> <div id="para-2"> <h3>This is paragraph 2</h3> <p>Morbi ac sapien neque...</p> </div> <div id="para-3"> <h3>This is paragraph 3</h3> <p>Sed ligula urna, hendrerit...</p> </div>
:target { -webkit-transition: background 500ms ease-out; -moz-transition: background 500ms ease-out; -ms-transition: background 500ms ease-out; -o-transition: background 500ms ease-out; transition: background 500ms ease-out; color: white; } #para-1:target { background: #2484C6; } #para-2:target { background: #4EB161; } #para-3:target { background: #E64526; }Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!