07/01/2019, 14:28
JQuery API: :target Selector
Target Selector sẽ lựa chọn phần tử được chỉ ra bởi fragment trong URI của tài liệu. Nếu URI có bao gồm một fragment hoặc một hash, thì :target sẽ tìm kiếm phần tử dựa vào id được cung cấp bởi fragment hoặc hash đó. Ví dụ nếu URI có dạng https://code24h.com# ...
Target Selector sẽ lựa chọn phần tử được chỉ ra bởi fragment trong URI của tài liệu.
Nếu URI có bao gồm một fragment hoặc một hash, thì :target sẽ tìm kiếm phần tử dựa vào id được cung cấp bởi fragment hoặc hash đó. Ví dụ nếu URI có dạng https://code24h.com#target thì :target selector sẽ tìm kiếm phần tử có id="target".
Cú pháp
Cú pháp
jQuery( ":target" )
Ví dụ
Tìm kiếm các phần tử có id="targer" và đổi màu cho chúng. Các bạn copy đoạn code dưới đây vào file test.html sau đó mở file đó lên bằng trình duyệt và thêm #target vào cuối đường dẫn để chạy thử:
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Học lập trình miễn phí tại code24h.com</title>
<script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
<style type="text/css">
td{
background: black;
awidth: 50px;
height: 50px;
}
</style>
</head>
<body>
<h1>Học lập trình miễn phí tại code24h.com</h1>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td id="target"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<hr>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
$( ":target" ).html( "đây là mục tiêu" ).css("background", "red");
}
</script>
</body>
</html>Kết quả:
Tham khảo: jquery.com
Nguồn: code24h.com
