jQuery :target

admin發表於2018-02-01
jQuery

如果文件的URI包含一個格式化的識別符號，或hash，那麼此選擇器將匹配ID和識別符號相匹配的元素。

選擇jQuery1.9版本新增。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
jQuery( ":target" )

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">  
a{
  width:60px;
  height:20px;
  background:#F90;
  font-size:12px;
  text-align:center;
  line-height:20px;
  position:fixed;
  right:0px;
  top:50px;
  cursor:pointer;
  display:block;
  text-decoration:none;
}
#ant{
  width:100%;
  height:50px;
  background:#CCC;
  margin-top:100px;
  text-align:center;
  line-height:50px;
}
</style>  
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("a").click(function () {
    $("div:target").css("color", "blue")
  })
})
</script>
</head>  
<body style="height:1000px;">  
<a href="#ant">點選定位</a>
<div id="ant">螞蟻部落</div>
</body>  
</html>

上面的程式碼是一個錨點定位，點選連結，那麼就會匹配id屬性值為"ant"的div元素。

特別說明：本案例需要在本機測試，螞蟻部落編輯器點選按鈕會跳轉到首頁。

相關文章