錨點連接和hash屬性

時間 2019-12-05

標籤連接 hash 屬性简体版

原文原文鏈接

相信你們挺常常見過這樣一個效果。有一個很長很長的頁面，分紅好幾部分，目錄中一點擊，就能定位到頁面某個位置。javascript

例如：有這樣一個目錄，例如你點擊一下「HTML」，就會直接跳轉到「HTML」的頁面位置html

這就是錨點連接（也叫書籤連接），經常用於那些內容龐大繁瑣的網頁，經過點擊命名錨點，不只讓咱們能指向文檔，還能指向頁面裏的特定段落，更能看成"精準連接"的便利工具。java

在長頁面中，用錨點定位本頁面的某個位置，那用錨點連接就能夠了。用法很簡單，代碼demo以下：工具

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
 
<a href="#5F">點擊我，會錨點定位到某個地方</a>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<a name="5F">某個地方哈哈哈哈</href>
 
 
</body>
</html>

接下來，要講的hash屬性的錨點連接，實用性蠻高的。url

在一次建站的過程當中，遇到我遇到了這樣一個問題，spa

在首頁的導航中，我準備點擊"關於咱們"下拉菜單的「加入咱們」,可是跳到「關於咱們」頁面後的tab仍是已經停留在「新聞」的版塊，並非「加入咱們」的版塊。如圖所示：3d

面對這種狀況，我採用的是hash屬性錨點連接，思路是這樣的，先在index.html的導航四個連接中，先設置hash值，而後等到跳轉到about.html的時候，再用var tab_hash=window.location.hash,去獲取後面的hash值，才進行邏輯判斷。htm

簡單點說：其實仍是跟普通的跳轉同樣，只不過在跳轉的url後面加多了一個信息，讓頁面跳轉後，再把信息拿下來使用。blog

一個小小實用性的屬性，分享給你們，順祝碼祺！！ip

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。