詳解A標(biāo)簽中href=""的幾種用法
眾所周知,a標(biāo)簽的最重要功能是實(shí)現(xiàn)超鏈接和錨點(diǎn)。而且,大多數(shù)人認(rèn)為a標(biāo)簽最重要的作用是實(shí)現(xiàn)超鏈接,今天我剛好碰到a標(biāo)簽的一種寫法<a href="JavaScript:;"></a>,所以就來整理下a標(biāo)簽中href的幾種用法。
一、js的幾種調(diào)用方法(參考總結(jié)的)
1、a href="javascript:js_method();"
這是常用的方法,但是這種方法在傳遞this等參數(shù)的時(shí)候很容易出問題,而且javascript:協(xié)議作為a的href屬性的時(shí)候不僅會導(dǎo)致不必要的觸發(fā)window.onbeforeunload事件,在IE里面更會使gif動(dòng)畫圖片停止播放。W3C標(biāo)準(zhǔn)不推薦在href里面執(zhí)行javascript語句
2、 a href="javascript:void(0);" onclick="js_method()"
這種方法是很多網(wǎng)站最常用的方法,也是最周全的方法,onclick方法負(fù)責(zé)執(zhí)行js函數(shù),而void是一個(gè)操作符,void(0)返回undefined,地址不發(fā)生跳轉(zhuǎn)。而且這種方法不會像第一種方法一樣直接將js方法暴露在瀏覽器的狀態(tài)欄。
3、a href="javascript:;" onclick="js_method()"
這種方法跟跟2種類似,區(qū)別只是執(zhí)行了一條空的js代碼。
4、a href="#" onclick="js_method()"
這種方法也是網(wǎng)上很常見的代碼,#是標(biāo)簽內(nèi)置的一個(gè)方法,代表top的作用。所以用這種方法點(diǎn)擊后網(wǎng)頁后返回到頁面的最頂端。
5、a href="#" onclick="js_method();return false;"
這種方法點(diǎn)擊執(zhí)行了js函數(shù)后return false,頁面不發(fā)生跳轉(zhuǎn),執(zhí)行后還是在頁面的當(dāng)前位置。
綜合上述,在a中調(diào)用js函數(shù)最適當(dāng)?shù)姆椒ㄍ扑]使用:
<a href="javascript:void(0);" onclick="js_method()"></a> <a href="javascript:;" onclick="js_method()"></a> <a href="#" onclick="js_method();return false;"></a>
二、href="#"的作用
a中href="#"表示回到最頂部。如果當(dāng)前頁面中需要滾動(dòng)的話,那么用這種方式就可以直接回到頂部。比如有些網(wǎng)站會在右下角制作一個(gè)圖標(biāo)按鈕,回到頂部,那么此時(shí)可以考慮用這種最簡單的方式實(shí)現(xiàn)。
<span style="font-size:14px;"><a href="#">回到最頂端</a></span>
三、href="URL"的作用
1、URL為絕對URL
此時(shí)指向另一個(gè)站點(diǎn),比如href="
2、URL為相對URL 此時(shí)指向站點(diǎn)內(nèi)的某個(gè)文件,比如href="/test.doc",那么點(diǎn)擊時(shí)就會直接下載文件。 3、錨 URL 此時(shí)指向頁面中的錨,比如href="#top",那么點(diǎn)擊時(shí)就會到當(dāng)前頁面中id="top"的這個(gè)錨點(diǎn),實(shí)現(xiàn)當(dāng)前頁面的所謂跳轉(zhuǎn)。用的最多就是在可滾動(dòng)頁面中,添加菜單,可以直接回到頁面中的某個(gè)部分的內(nèi)容。 即所有的三種代碼樣例: 總結(jié) 以上所述是小編給大家介紹的A標(biāo)簽中href=""的幾種用法 ,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時(shí)回復(fù)大家的!
<a >超鏈接</a>
<a href="#">回到最頂端</a>
<a href="css/css1.css">文件鏈接</a>
相關(guān)文章
viewer.js一個(gè)強(qiáng)大的基于jQuery的圖像查看插件(支持旋轉(zhuǎn)、縮放)
這篇文章主要介紹了Viewer這一款強(qiáng)大的 jQuery 圖像瀏覽插件,在信息詳情頁面實(shí)現(xiàn)點(diǎn)擊圖片可以預(yù)覽,腳本之家也是用的這個(gè)js,這里為分享一下使用方法,需要的朋友可以參考下2020-04-04
javaScript實(shí)現(xiàn)支付10秒倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)支付10秒倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
javascript實(shí)現(xiàn)的淘寶旅行通用日歷組件用法實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的淘寶旅行通用日歷組件,以實(shí)例形式分析了該日歷組件的相關(guān)設(shè)置及使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
bootstrap的3級菜單樣式,支持母版頁保留打開狀態(tài)實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猙ootstrap的3級菜單樣式,支持母版頁保留打開狀態(tài)實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JSON.stringify(遞歸)與?JSON.parse(有限狀態(tài)自動(dòng)機(jī))的實(shí)現(xiàn)代碼
這篇文章主要介紹了JSON.stringify(遞歸)與?JSON.parse(有限狀態(tài)自動(dòng)機(jī))的實(shí)現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
JavaScript Date對象應(yīng)用實(shí)例分享
這篇文章主要分享了JavaScript Date對象應(yīng)用實(shí)例,獲取日期時(shí)間,倒計(jì)時(shí)功能實(shí)現(xiàn),限時(shí)搶購活動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
javascript實(shí)現(xiàn)鼠標(biāo)放上后下邊對應(yīng)內(nèi)容變換的效果
這篇文章主要介紹了javascript鼠標(biāo)放上后下邊對應(yīng)內(nèi)容變換的方法,實(shí)例分析了javascript實(shí)現(xiàn)tab切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08

