標簽href幾種使用


a標簽的最重要功能是實現超鏈接和錨點,a標簽里href屬性是我們經常用的,其實它的值有很多種,可能我們往往會忽略,今天分享一下a標簽的屬性值及用法。

1. href=“#”:

這是一個比較常用的方法。#是標簽內置的一個方法,用於網頁返回頂部較多。比如在底部有個置頂的按鈕,使用這個就比較方便了。

使用:<div><a href="#">返回頂部</a></div>

2.href=“url”:

這也是我們最常使用的屬性值。你可以給定一個固定值,進行跳轉。(本次target不做具體介紹)

target="_blank"::瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。<a href="https://www.baidu.com/"  target="_blank">跳轉到新頁面</a>;

target="_self"::<a> 標簽是默認目標,它使得目標文檔載入並顯示在相同的框架或者窗口中作為源文檔。

target="_parent"::這個目標使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框架中,那么它與目標 _self 等效。

target="_top"::這個目標使得文檔載入包含這個超鏈接的窗口,用 _top 目標將會清除所有被包含的框架並將文檔載入整個瀏覽器窗口。

3:<a> 標簽 + onclick='{jscode}' 是很常用的一種 js 運用方式

其實用js有幾種方法。

I :a href="javascript:",這個方法比較常見,其中javascript:是偽協議,意思是可以讓我們通過一個鏈接來調用javascript函數。地址不發生跳轉。可以實現A標簽的點擊事件運行時,頁面不會跳轉。

II:  a href="javascript:void(0)"; void是一個操作符,void(0)返回undefined,頁面也不會發生跳轉

III :a href="#" onclick="js_method();return false;",這個方法的意思大致是:方法點擊執行了js函數后return false,頁面不發生跳轉。

該方法缺點:使用javascript:void(0)可能會有瀏覽器兼容問題,比如:在ie下使用可能造成gif動畫停止播放等。

4:href=“###”:

這個方法,剛使用這個標簽不久的人,不太了解。'###' 其實就是一個無意義的標簽指定,也就是一個 '#' 和不存在的標簽 '##' 的組合。頁面中找不到命名為 '##' 的 <a> 時該鏈接就不會發生跳轉,也就不會導致執行 onclick 中的內容時突然發生頁面跳到頁首的問題。說白了"###" 就是一個不是錨點的字符串 瀏覽器找不到也不會跳到頁首,原理就是依賴了網頁的報錯機制,找不到就不做處理。

對於“###”這個也有些缺點,它會改變鏈接地址。點擊完成后,你會發現地址欄里后面多了3個#。

 

 

可以根據自己的需求使用。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM