什麼是href =「#」,爲何使用它?

在許多網站上,我看到具備href="#"連接。 這是什麼意思? 這有什麼用途? javascript


#1樓

一般建立無序列表是爲了將它們用做菜單,可是li列表項是文本。 由於列表li的項目是文本,鼠標指針會不會是一個箭頭,而是一個「I形光標」。 用戶習慣於單擊某些東西時看到指向鼠標指針的手指。 使用錨標籤, li標籤a內部會致使鼠標指針更改成手指。 使用列表做爲菜單時,手指要好得多。 html

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

若是該列表用於菜單,而且不須要連接,則不須要指定URL。 可是問題是,若是忽略href屬性,則<a>標記中的文本將被視爲文本,所以鼠標指針將返回到I光標。 I光標可能使用戶認爲菜單項不可單擊。 所以,您仍然須要href ,但不須要指向任何地方的連接。 html5

您能夠在菜單列表中使用不少divp標籤,可是鼠標指針也將是它們的I光標。 java

您可使用許多彼此堆疊的按鈕來得到菜單列表,可是列表彷佛更可取。 這可能就是爲何在列表標籤​​內的定位標籤中使用指向無處的href="#"緣由。 程序員

您能夠在CSS中設置指針樣式,這是另外一種選擇。 href="#"到無處可能只是設置某些樣式的懶惰方式。 瀏覽器


#2樓

關於超連接:

錨標記- <a></a>的主要用途是做爲超連接 。 這基本上意味着他們會將您帶到某個地方。 超連接須要href屬性,由於它指定了位置。 網絡

雜湊:

超級連接中的井號( #指定了應將窗口滾動到的html元素ID。 less

href="#some-id"將滾動到當前頁面上的元素,例如<div id="some-id">函數

href="//site.com/#some-id"將轉到site.com並滾動到該頁面上的ID。 網站

滾動到頂部:

href="#"沒有指定ID名稱,可是具備相應的位置-頁面頂部。 單擊帶有href="#"的錨點會將滾動位置移到頂部。

看到這個演示。

根據w3文檔,這是預期的行爲

超連接佔位符:

模板預覽中的一個超連接佔位符有意義的示例。 在模板的單頁演示中,我常常看到<a href="#">所以anchor標記是一個超連接,但不會隨處可見。 爲何不將href屬性留空? 空白的href屬性其實是指向當前頁面的超連接。 換句話說,它將致使頁面刷新。 正如我所討論的, href="#"也是超連接,而且會致使滾動。 所以,超連接佔位符的最佳解決方案其實是href="#!" 這裏的想法是但願頁面上沒有id="!"的元素id="!" (是誰作的!?),所以超連接什麼也沒指-所以什麼也沒發生。

關於定位標記:

您可能想知道的另外一個問題是:「爲何不僅關閉href屬性?」。 我聽到的一個常見答覆是href屬性是必需的,所以它應該「出如今」錨點上。 這是假的! 只有當錨其實是超連接時,才須要href屬性! 從w3閱讀此內容 。 那麼,爲何不將它留給佔位符呢? 瀏覽器呈現元素的默認樣式,並將更改不具備href屬性的錨標記的默認樣式。 相反,它將被視爲常規文本。 它甚至能夠更改瀏覽器有關元素的行爲。 當鼠標懸停在沒有href屬性的錨點上時,狀態欄(屏幕底部)將不會顯示。 最好在錨點上使用佔位符href值,以確保將其視爲超連接。

請參閱此演示,演示樣式和行爲差別。


#3樓

正如其餘一些答案所指出的那樣, a元素須要href屬性,而#用做佔位符,但這也是歷史產物。

來自Mozilla開發人員網絡

href

這是定義超文本源連接的錨的惟一必需屬性,但在HTML5中再也不須要。 省略此屬性將建立一個佔位符連接。 href屬性指示連接目標,能夠是URL或URL片斷。 URL片斷是一個名稱,其前面帶有井號(#),用於指定當前文檔中的內部目標位置(ID)。

另外,按照HTML5 規範

若是a元素沒有href屬性,則該元素表示一個佔位符,不然可能會放置一個連接(若是存在的話),該連接僅由元素的內容組成。


#4樓

將href =「#」用於空連接的問題在於,它會將您帶到頁面頂部,這可能不是您想要的操做。 爲避免這種狀況,對於較舊的瀏覽器或非HTML5文檔類型,請使用

<a href="javascript:void(0)">Goes Nowhere</a>

#5樓

不幸的是, <a href="#">的最多見用法是懶惰的程序員,他們但願可單擊的非超連接javascript編碼的元素的行爲相似於錨點,但不能使它們添加cursor: pointer;:hover樣式將其非超連接元素添加到類中,而且因爲過於懶惰而沒法將href設置爲javascript:void(0);

問題是一個<a href="#" onclick="some_function();">或另外一個不可避免地以javascript錯誤結尾,而帶有onclick javascript錯誤的錨點始終以其href結尾結尾。 一般,這最終會致使頁面頂部使人討厭的跳轉,可是對於使用<base>的網站, <a href="#">被視爲<a href="[base href]/#"> ,致使導航異常。 any logable errors are being generated, you won't see them in the latter case unless you enable persistent logs. 正在生成任何可記錄錯誤,則在後一種狀況下,除非啓用持久日誌,不然您將看不到它們。

used as a non-anchor it have its href set to javascript:void(0); 若是錨定元件用做一個非錨定它有其href設置javascript:void(0); degradation. 爲了降級。

我只是浪費了兩天時間來調試一個本應只是刷新頁面的隨機意外頁面重定向,最後將其跟蹤到引起<a href="#">的click事件的函數。 用javascript:void(0);替換# javascript:void(0); 修復。

星期一我要作的第一件事是清除全部<a href="#">實例的項目。

相關文章
相關標籤/搜索