1. 程式人生 > >a標籤中href=""的幾種用法

a標籤中href=""的幾種用法

眾所周知,a標籤的最重要功能是實現超連結和錨點。而且,大多數人認為a標籤最重要的作用是實現超連結,今天我剛好碰到a標籤的一種寫法,所以就來整理下a標籤中href的幾種用法。
一、Js的幾種呼叫方法(參考總結的)
1、a href=”javascript:js_method();”

   這是常用的方法,但是這種方法在傳遞this等引數的時候很容易出問題,而且javascript:協議作為a的href屬性的時候不僅會導致不必要的觸發window.onbeforeunload事件,在IE裡面更會使gif動畫圖片停止播放。W3C標準不推薦在href裡面執行javascript語句

   2、 a href="javascript:void(0);" onclick="js_method()"

   這種方法是很多網站最常用的方法,也是最周全的方法,onclick方法負責執行js函式,而void是一個操作符,void(0)返回undefined,地址不發生跳轉。而且這種方法不會像第一種方法一樣直接將js方法暴露在瀏覽器的狀態列。

   3、a href="javascript:;" onclick="js_method()"

   這種方法跟跟2種類似,區別只是執行了一條空的js程式碼。

  4、a href="#" onclick="js_method()"

   這種方法也是網上很常見的程式碼,#是標籤內建的一個方法,代表top的作用。所以用這種方法點選後網頁後返回到頁面的最頂端。

 5、a href="#" onclick="js_method();return false;"

   這種方法點選執行了js函式後return false,頁面不發生跳轉,執行後還是在頁面的當前位置。

  綜合上述,在a中呼叫js函式最適當的方法推薦使用:

[javascript] view plain copy

1. <a href="javascript:void(0);" onclick="js_method()"></a>  
2. <a href="javascript:;" onclick="js_method()"></a>  
3. <a href="#" onclick="js_method();return false;"></a>  

二、href=”#”的作用
a中href=”#”表示回到最頂部。如果當前頁面中需要滾動的話,那麼用這種方式就可以直接回到頂部。比如有些網站會在右下角製作一個圖示按鈕,回到頂部,那麼此時可以考慮用這種最簡單的方式實現。
[javascript] view plain copy

1. <span style="font-size:14px;"><a href="#">回到最頂端</a></span>  

三、href=”URL”的作用
1、URL為絕對URL
此時指向另一個站點,比如href=”http://write.blog.csdn.net”;,那麼點選時就會直接跳轉到這個連結的頁面。
2、URL為相對URL
此時指向站點內的某個檔案,比如href=”/test.doc”,那麼點選時就會直接下載檔案。
3、錨 URL
此時指向頁面中的錨,比如href=”#top”,那麼點選時就會到當前頁面中id=”top”的這個錨點,實現當前頁面的所謂跳轉。用的最多就是在可滾動頁面中,新增選單,可以直接回到頁面中的某個部分的內容。
即所有的三種程式碼樣例:
[javascript] view plain copy

1. <a href="http://baidu.com";>超連結</a>  
2. <a href="#">回到最頂端</a>  
3. <a href="css/css1.css">檔案連結</a>  

相關推薦

Html A標籤 href 和 onclick用法、區別、優先級別

http://gocom.primeton.com/blog21307_27051.htm 我以前在寫<A>的href和onclick一直很隨意,後來出過幾次問題,以後才開始重視這個問題: 首先摘錄一篇文件: 在Javascript中void是一個操

a標籤href=""的用法

眾所周知,a標籤的最重要功能是實現超連結和錨點。而且,大多數人認為a標籤最重要的作用是實現超連結,今天我剛好碰到a標籤的一種寫法,所以就來整理下a標籤中href的幾種用法。 一、Js的幾種呼叫方法(參考總結的) 1、a href=”javascr

a標籤href呼叫js的方法

我們常用的在a標籤中有點選事件: 1. a href=”javascript:js_method();” 這是我們平臺上常用的方法,但是這種方法在傳遞this等引數的時候很容易出問題,而且javascript:協議作為a的href屬性的時候不僅會導致不必要的觸發window.onbeforeun

a標籤href=""的用法詳解

      眾所周知,a標籤的最重要功能是實現超連結和錨點。而且,大多數人認為a標籤最重要的作用是實現超連結,今天我剛好碰到a標籤的一種寫法<a href="JavaScript:;">

a標籤 href onclick

⒈  連結的 onclick 事件被先執行,其次是 href 屬性下的動作(頁面跳轉,或 javascript 偽連結); ⒉  假設連結中同時存在 href 與 onclick,如果想讓 href 屬性下的動作不執行,onclick 必須得到一個 false 的返回值;

asp.net a標籤href=“#”屬性和 onclick()事件詳解

這幾天做網站專案中遇到一個問題,就是在巢狀網站的時候發現不管onclick()跳轉到任何頁面,都會重新整理當前頁面,後來我才發現,是a標籤搞的鬼, 1:a標籤中href=“#”是指跳轉到當前頁面,所以重新整理的就是你的當前頁面,而同時存在onclick,href的時候會首先

a標籤呼叫javascript方法的方法與window.open()

我們常用的在a標籤中有點選事件: 1. a href="javascript:js_method();" 這是我們平臺上常用的方法,但是這種方法在傳遞this等引數的時候很容易出問題,而且javascript:協議作為a的href屬性的時候不僅會導致不必要的觸發window

3分鐘掌握MongoDB的regex用法

lib cat 正則表達式 小寫 可選參數 介紹 src 我們 包括 3分鐘掌握MongoDB中的regex幾種用法背景Part1:寫在最前使用MySQL或其他關系型數據庫的朋友們都知道,使用模糊查詢的用法類似於:SELECT * FROM products WHERE s

shell的(),{}語法用法

elif log 最長匹配 名稱 abcd 用法 操作數 擴展 非貪婪 查看腳本語法是否有錯誤:bash -n modify_suffix.sh跟蹤執行sh -x modify_suffix.sh aaa 1.${var} 2.$(cmd) 3.()和{} 4.

vuea標籤href屬性的寫法

問題:vue.js a標籤href裡有變數,函式拼接問題 <a :href ="'http://search.jd.com/Search?enc=utf-8&keyword='+keyWord+'&page='+Math.ceil(record.skuRank/60

a標籤herf的用法

a標籤中herf的用法 一、Js的幾種呼叫方法 1、a href=“javascript:js_method();” 這是常用的方法,但是這種方法在傳遞this等引數的時候很容易出問題,而且javascript:協議作為a的href屬性的時候不僅會導致不必要的觸發window.onb

JavaScript的this關鍵字的用法

JS 裡的 this 在 function 內部被建立 指向呼叫時所在函式所繫結的物件(拗口) this 不能被賦值,但可以被 call/apply 改變 1. this 和建構函式 function C(){ this.a = 37; }

js提交a標籤href地址

場景: 專案中有一個刪除是直接用的a標籤的href和jinja的url_for+刪除操作的路由地址實現刪除操作 <a href="url_for('admin.area_delete',id=id)" class='btn btn-xs btn-danger'> <

Vue a標籤href無法跳轉

問題:     使用vue-router 在IE下 a標籤裡的路由不跳轉,火狐,chrome工作正常。 解決:     在App.vue 裡增加判斷IE瀏覽器手動修復…… export default {   na

JavaArray.sort()的用法[轉]

轉自: http://www.cnblogs.com/IT-sky/p/3749859.html?utm_source=tuicool&utm_medium=referral void java.util.Arrays.sort(int[] a, int fromIn

關於javaArrays.sort()的用法

今天看到了Arrays了(覺得自己學東西真是龜速啊),Arrays裡面有一個sort是針對陣列排序的。。。然後就看了看它的簡單用法 同樣轉載(我不生產程式碼,我只是程式碼的搬運工.....):http://www.tuicool.com/articles/iii6N3   

Python檔案操作aa+,w,w+方式的區別 ——轉載

轉載:https://blog.csdn.net/qq_38059635/article/details/81606977   第一步 排除檔案開啟方式錯誤: r只讀,r+讀寫,不建立 w新建只寫,w+新建讀寫,二者都會將檔案內容清零 (以w方式開啟,不能讀出。w+可讀

JavaArray.sort()的用法 JavaArray.sort()的用法

Java中Array.sort()的幾種用法 ava的Arrays類中有一個sort()方法,該方法是Arrays類的靜態方法,在需要對陣列進行排序時,非常的好用。 但是sort()的引數有好幾種,下面我就為大家一一介紹,這幾種形式的用法。 ===============================

PHP抓取頁面a標籤href屬性值以及a中間內容

$str = file_get_contents($zh_cn_url); $reg1='/<a href=\"(.*?)\".*?>(.*?)<\/a>/i';//匹配所有A標籤 preg_match_all($reg1,$str,$aarray); //這個$a

window location href多次跳轉導致a標籤的onclick失效

我們通過window.location.href來多次跳轉一個介面的時候可能會出現a標籤的失效,可以通過 <a  href="javascript:history.go(-1);" >返回