html中a標籤中的onclick和href的使用--轉載
連結的 onclick 事件被先執行,其次是 href 屬性下的動作(頁面跳轉,或 javascript 偽連結);
假設連結中同時存在 href 與 onclick,如果想讓 href 屬性下的動作不執行,onclick 必須得到一個 false 的返回值。不信,你可以將 goGoogle 函式中的 return false 註釋掉;
如果頁面過長有滾動條,且希望通過連結的 onclick 事件執行操作。應將它的 href 屬性設為 javascript:void(0);,而不要是 #,這可以防止不必要的頁面跳動;
如果在連結的 href 屬性中呼叫一個有返回值的函式,當前頁面的內容將被此函式的返回值代替;
在按住Shift鍵的情況下會有所區別。
今天我遇到的問題,在IE6.0裡以href的形式訪問不到parentNode。
儘量不要用javascript:協議做為A的href屬性,這樣不僅會導致不必要的觸發window.onbeforeunload事件,在IE裡面更會使gif動畫圖片停止播放
下面是自己遇到的:
如果不設定 href屬性在IE6下面會不響應hover。雙擊後會選中標籤的父容器而非這個一a標籤(IE下都存在這一問題)。
<a href="javascirpt:fn(this)"> <a onclick="fn(this)"> 假定我們有個fn方法,需要取到這個元素,第一個方法傳入的this是空值。
所以,比較推薦的寫法是<a href="javascript:void(0)" onclick="fn(this)">
下面程式碼則執行了subgo()函式,
<a href="javascript:void(0)" onclick="subgo()">點我</a>
在這裡,javascript:void(0),沒啟實質上的作用,它僅僅是一個死連結,執行的函式是subgo()。
<a href="http://blog.163.com/wb_zhaoyuwei/blog/#" onclick="subgo()">點我</a>與<a href="javascript:void(0)" onclick="subgo()">點我</a>區別。
實際上 #包含了一個位置資訊預設的錨是#top 也就是網頁的上端 ,而javascript:void(0) 僅僅表示一個死連結,沒有任何資訊。所以呼叫指令碼的時候最好用void(0)
href一般是指向一個URL地址,也可以呼叫javascript ,如href="javascript:xxx();",文件中推薦這樣寫:<a href="http://blog.163.com/wb_zhaoyuwei/blog/ javascript:void(0)" onclick="xxx();">xx</a>,但是這種方法在複雜環境有時會產生奇怪的問題,儘量不要用javascript:協議做為A的href屬性,這樣不僅會導致不必要的觸發window.onbeforeunload事件,在IE裡面更會使gif動畫圖片停止播放。
我們知道連結的 onclick 事件被先執行,其次是 href 屬性下的動作(頁面跳轉,或 javascript 偽連結),如果不想執行href 屬性下的動作執行,onclick 需要要返回 false ,一般是這樣寫onclick="xxx();return false;".
TabPane的JS原始碼,由於onclick沒有返回FALSE,當IFRMAE中關閉TABPANE時會導致href執行,頁面顯示有問題。解決辦法就是將下面程式碼複製到使用TAB的JSP中。
------------------------------------------------------------------------------------------------------------------------------------------
至於其他樓說的【IE8中,如:"javascript:;","javascript:void(0)","javascript:void(null)"都被拒絕】因為沒有安裝IE8,不敢妄下結論。
------------------------------------------------------------------------------------------------------------------------------------------
如果在實際應用中確實是要用到<a>標籤來響應onclick事件的。
那麼就建議使用下面三種方法
1.<a href="javascript:void(0)" onclick="doSomething()">test</a>
2.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();return false">test</a>
3.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();event.returnValue=false">test</a>
--------------------------------------------------------------------------------------------------
超級連結<a>標記代表一個連結點,是英文anchor(錨點)的簡寫。它的作用是把當前位置的文字或圖片連線到其他的頁面、文字或影像,這已是眾所周知了,但關於它的語法結構可能有點鮮為人知,而要用活它則必須瞭解其語法結構。<a>標記的基本語法結構是:
<a
class=type
id=value
href=reference
name=value
rel=same|next|parent|previous
rev=value
target=window
style=value
title=title
onclick=function
onmouseout=function
onMouseOver=function>連線</a>
從標記的語法結構可以看出,在設定一個超級連結時有很多引數可供選擇,以實現不同的連結效果,這有點出乎意料吧?!
其中class和id選項:用於設定連結點所屬的型別和分配的ID號,通常不加以設定。最常用的兩個引數是href和name。其中href是hypertext reference的縮略詞,用於設定連結地址。連結地址必須為url地址,如果沒有給出具體路徑,則預設路徑和當前頁的路徑相同。 連結到的檔案也分為幾種情況:如果為HTML檔案,則在當前瀏覽器中直接開啟;如果為可執行檔案(.exe檔案),則直接執行或下載,我們提供下載的檔案就是用它的這種特性做的;如果為文字檔案如word格式的檔案,則在瀏覽器中開啟此檔案,並可以進行編輯加工。
rel:表示設定連結的關係:rel=same表示待連結的檔案與此檔案相同,rel=next表示待連結的檔案為下一頁,rel=parent表示本檔案為待連結檔案的父檔案,rel=previous則表示待連結的檔案為上一頁。
rev:則用於設定反向連結。
target:是在採用幀視窗的情況下設定連結到哪一個視窗,還有target="_bank"是表示新開一視窗開啟網頁。
title:用於設定連結點被選到時顯示的標題。
onclick:對應於一個事件,當連結點被點選後將觸發這個事件,執行對應的子程式。
onmouseover:與onclick類似,對應的事件在滑鼠移到連結點上時被觸發。
onmouseout:對應的事件在滑鼠移出鎮接點後被觸發。
舉幾個例子:
<a href="http://blog.163.com/wb_zhaoyuwei/blog/index.htm">回到主頁</a>
<a href="http://blog.163.com/wb_zhaoyuwei/blog/sound.wav">播放語音檔案</a>
<a href="http://blog.163.com/wb_zhaoyuwei/blog/javascipt.open()">執行對應的程式</a>
<a herf="document.doc">開啟對應的文件進行加工</a>
應用技巧
1、提供下載檔案
有不少網友來信問,提供下載的效果怎麼做。實際上仍然是做一個超級連結,不過供下載的檔案必須上傳到網站上。例:有一個“網頁技巧”的檔案包供下載,檔名是“homepagejq.zip”且已上傳到網站了,則這個連結的程式碼可以這樣寫:<a href="http://blog.163.com/wb_zhaoyuwei/blog/homepagejq.zip">點選這裡下載“網頁技巧”檔案包</a>。
2、在新視窗中開啟連結的網頁
設定“target”的值為“_blank”。例:新開視窗開啟網頁“aboutme.htm”。產生該效果的程式碼是:<a href="http://blog.163.com/wb_zhaoyuwei/blog/aboutme.htm" target="_blank">關於我......</a>。
3、滑鼠移到連結,顯示一行說明文字
設定“title”引數值,即可獲得這種效果。例:當滑鼠移到“黃山村夫”這個連結上時,顯示說明“這是一個介紹網頁製作技巧的專業網站”。這個連結的程式碼是這樣的:<a href="http://blog.163.com/wb_zhaoyuwei/blog/hscf.htm" title="這是一個介紹網頁製作技巧的專業網站">黃山村夫</a>。
4、滑鼠移到一個連結上彈出一個視窗
這是設定onmouseover引數獲得的效果。例:當滑鼠移到一個連結上,彈出一個視窗並在視窗中顯示“滑鼠懸停效果演示!”。這個連結的程式碼是這樣的:<a href="http://blog.163.com/wb_zhaoyuwei/blog/其它網頁.htm" onmouseover="alert('滑鼠懸停效果演示!')">連結</a>。用類似的方法可以製作當滑鼠按下後彈出提出示視窗、當滑鼠離開時彈出提示視窗的效果。
5、連結到本頁的指定內容
要實現連結到本頁的某一部分內容上(也就是“檔案內跳轉”),必須用引數name指定連結點的名稱。選定一塊文字,可以用name引數為其命名,以備 連結所用。所謂同一個檔案內的跳轉是指當讀者在閱讀一個很長的檔案的時候,若只對某部分的內容感興趣,可以採用跳躍式的閱讀方式。其基本格式是:
<a href="#連結點名稱">第二部分</a>第一部分內容......
...........................................
<a name="連結點名稱"></a>第二部分實際內容......
...........................................
這樣當你點選“第二部分”這個超級連結後,就會自動轉移到“第二部分實際內容”這個地方來。“name”引數所定義的連結點名稱可以隨意取,但連結的“href”引數中的連結點名稱必須與其一致,不要忘記在前面加上“#”。
6、連結到其它頁面的指定內容位置
方法與上例類似,但在“href”引數中的連結點名稱前要加上網頁的檔名。例:有兩個網頁page1.htm和page2.htm ,每頁均有兩部分內容,現要在page1.htm中製作一個超級連結,按下該連結後將轉到page2.htm的第二部分內容上。那麼我們可以這樣做,首先在page2.htm第二部分內容開始的地方寫上這樣一句程式碼:<a name="連結點名稱"></a>;在page1.htm中寫上這樣一個連結程式碼:<a href="http://blog.163.com/wb_zhaoyuwei/blog/pagw2.htm#連結點名稱">page2 的第二部分內容</a>。
7、連結到E_mail
點選一個超級連結後,將啟動客戶機上的電子郵件管理軟體給你寫信。例這行程式碼:<a href="mailto:web@webjx.com">請給我寫信</a>。一旦你點選了“請給我寫信”這個連結,將自動啟動電子郵件管理軟體(如OE)的寫信功能,並已把郵件地址加在了收信人的位址列裡了。
連結不僅可以以文字作載體,也可以以圖象作載體,而且可以以圖片的某一部分作載體,且都能實現上述這些效果,方法也相同,所不同只是載體,也就是連結的兩對方括號中間的那部分,所以不再另舉例了。
假設連結中同時存在 href 與 onclick,如果想讓 href 屬性下的動作不執行,onclick 必須得到一個 false 的返回值。不信,你可以將 goGoogle 函式中的 return false 註釋掉;
如果頁面過長有滾動條,且希望通過連結的 onclick 事件執行操作。應將它的 href 屬性設為 javascript:void(0);,而不要是 #,這可以防止不必要的頁面跳動;
如果在連結的 href 屬性中呼叫一個有返回值的函式,當前頁面的內容將被此函式的返回值代替;
在按住Shift鍵的情況下會有所區別。
今天我遇到的問題,在IE6.0裡以href的形式訪問不到parentNode。
儘量不要用javascript:協議做為A的href屬性,這樣不僅會導致不必要的觸發window.onbeforeunload事件,在IE裡面更會使gif動畫圖片停止播放
下面是自己遇到的:
如果不設定 href屬性在IE6下面會不響應hover。雙擊後會選中標籤的父容器而非這個一a標籤(IE下都存在這一問題)。
<a href="javascirpt:fn(this)"> <a onclick="fn(this)"> 假定我們有個fn方法,需要取到這個元素,第一個方法傳入的this是空值。
所以,比較推薦的寫法是<a href="javascript:void(0)" onclick="fn(this)">
下面程式碼則執行了subgo()函式,
<a href="javascript:void(0)" onclick="subgo()">點我</a>
在這裡,javascript:void(0),沒啟實質上的作用,它僅僅是一個死連結,執行的函式是subgo()。
<a href="http://blog.163.com/wb_zhaoyuwei/blog/#" onclick="subgo()">點我</a>與<a href="javascript:void(0)" onclick="subgo()">點我</a>區別。
實際上 #包含了一個位置資訊預設的錨是#top 也就是網頁的上端 ,而javascript:void(0) 僅僅表示一個死連結,沒有任何資訊。所以呼叫指令碼的時候最好用void(0)
href一般是指向一個URL地址,也可以呼叫javascript ,如href="javascript:xxx();",文件中推薦這樣寫:<a href="http://blog.163.com/wb_zhaoyuwei/blog/ javascript:void(0)" onclick="xxx();">xx</a>,但是這種方法在複雜環境有時會產生奇怪的問題,儘量不要用javascript:協議做為A的href屬性,這樣不僅會導致不必要的觸發window.onbeforeunload事件,在IE裡面更會使gif動畫圖片停止播放。
我們知道連結的 onclick 事件被先執行,其次是 href 屬性下的動作(頁面跳轉,或 javascript 偽連結),如果不想執行href 屬性下的動作執行,onclick 需要要返回 false ,一般是這樣寫onclick="xxx();return false;".
TabPane的JS原始碼,由於onclick沒有返回FALSE,當IFRMAE中關閉TABPANE時會導致href執行,頁面顯示有問題。解決辦法就是將下面程式碼複製到使用TAB的JSP中。
------------------------------------------------------------------------------------------------------------------------------------------
至於其他樓說的【IE8中,如:"javascript:;","javascript:void(0)","javascript:void(null)"都被拒絕】因為沒有安裝IE8,不敢妄下結論。
------------------------------------------------------------------------------------------------------------------------------------------
如果在實際應用中確實是要用到<a>標籤來響應onclick事件的。
那麼就建議使用下面三種方法
1.<a href="javascript:void(0)" onclick="doSomething()">test</a>
2.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();return false">test</a>
3.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();event.returnValue=false">test</a>
--------------------------------------------------------------------------------------------------
超級連結<a>標記代表一個連結點,是英文anchor(錨點)的簡寫。它的作用是把當前位置的文字或圖片連線到其他的頁面、文字或影像,這已是眾所周知了,但關於它的語法結構可能有點鮮為人知,而要用活它則必須瞭解其語法結構。<a>標記的基本語法結構是:
<a
class=type
id=value
href=reference
name=value
rel=same|next|parent|previous
rev=value
target=window
style=value
title=title
onclick=function
onmouseout=function
onMouseOver=function>連線</a>
從標記的語法結構可以看出,在設定一個超級連結時有很多引數可供選擇,以實現不同的連結效果,這有點出乎意料吧?!
其中class和id選項:用於設定連結點所屬的型別和分配的ID號,通常不加以設定。最常用的兩個引數是href和name。其中href是hypertext reference的縮略詞,用於設定連結地址。連結地址必須為url地址,如果沒有給出具體路徑,則預設路徑和當前頁的路徑相同。 連結到的檔案也分為幾種情況:如果為HTML檔案,則在當前瀏覽器中直接開啟;如果為可執行檔案(.exe檔案),則直接執行或下載,我們提供下載的檔案就是用它的這種特性做的;如果為文字檔案如word格式的檔案,則在瀏覽器中開啟此檔案,並可以進行編輯加工。
rel:表示設定連結的關係:rel=same表示待連結的檔案與此檔案相同,rel=next表示待連結的檔案為下一頁,rel=parent表示本檔案為待連結檔案的父檔案,rel=previous則表示待連結的檔案為上一頁。
rev:則用於設定反向連結。
target:是在採用幀視窗的情況下設定連結到哪一個視窗,還有target="_bank"是表示新開一視窗開啟網頁。
title:用於設定連結點被選到時顯示的標題。
onclick:對應於一個事件,當連結點被點選後將觸發這個事件,執行對應的子程式。
onmouseover:與onclick類似,對應的事件在滑鼠移到連結點上時被觸發。
onmouseout:對應的事件在滑鼠移出鎮接點後被觸發。
舉幾個例子:
<a href="http://blog.163.com/wb_zhaoyuwei/blog/index.htm">回到主頁</a>
<a href="http://blog.163.com/wb_zhaoyuwei/blog/sound.wav">播放語音檔案</a>
<a href="http://blog.163.com/wb_zhaoyuwei/blog/javascipt.open()">執行對應的程式</a>
<a herf="document.doc">開啟對應的文件進行加工</a>
應用技巧
1、提供下載檔案
有不少網友來信問,提供下載的效果怎麼做。實際上仍然是做一個超級連結,不過供下載的檔案必須上傳到網站上。例:有一個“網頁技巧”的檔案包供下載,檔名是“homepagejq.zip”且已上傳到網站了,則這個連結的程式碼可以這樣寫:<a href="http://blog.163.com/wb_zhaoyuwei/blog/homepagejq.zip">點選這裡下載“網頁技巧”檔案包</a>。
2、在新視窗中開啟連結的網頁
設定“target”的值為“_blank”。例:新開視窗開啟網頁“aboutme.htm”。產生該效果的程式碼是:<a href="http://blog.163.com/wb_zhaoyuwei/blog/aboutme.htm" target="_blank">關於我......</a>。
3、滑鼠移到連結,顯示一行說明文字
設定“title”引數值,即可獲得這種效果。例:當滑鼠移到“黃山村夫”這個連結上時,顯示說明“這是一個介紹網頁製作技巧的專業網站”。這個連結的程式碼是這樣的:<a href="http://blog.163.com/wb_zhaoyuwei/blog/hscf.htm" title="這是一個介紹網頁製作技巧的專業網站">黃山村夫</a>。
4、滑鼠移到一個連結上彈出一個視窗
這是設定onmouseover引數獲得的效果。例:當滑鼠移到一個連結上,彈出一個視窗並在視窗中顯示“滑鼠懸停效果演示!”。這個連結的程式碼是這樣的:<a href="http://blog.163.com/wb_zhaoyuwei/blog/其它網頁.htm" onmouseover="alert('滑鼠懸停效果演示!')">連結</a>。用類似的方法可以製作當滑鼠按下後彈出提出示視窗、當滑鼠離開時彈出提示視窗的效果。
5、連結到本頁的指定內容
要實現連結到本頁的某一部分內容上(也就是“檔案內跳轉”),必須用引數name指定連結點的名稱。選定一塊文字,可以用name引數為其命名,以備 連結所用。所謂同一個檔案內的跳轉是指當讀者在閱讀一個很長的檔案的時候,若只對某部分的內容感興趣,可以採用跳躍式的閱讀方式。其基本格式是:
<a href="#連結點名稱">第二部分</a>第一部分內容......
...........................................
<a name="連結點名稱"></a>第二部分實際內容......
...........................................
這樣當你點選“第二部分”這個超級連結後,就會自動轉移到“第二部分實際內容”這個地方來。“name”引數所定義的連結點名稱可以隨意取,但連結的“href”引數中的連結點名稱必須與其一致,不要忘記在前面加上“#”。
6、連結到其它頁面的指定內容位置
方法與上例類似,但在“href”引數中的連結點名稱前要加上網頁的檔名。例:有兩個網頁page1.htm和page2.htm ,每頁均有兩部分內容,現要在page1.htm中製作一個超級連結,按下該連結後將轉到page2.htm的第二部分內容上。那麼我們可以這樣做,首先在page2.htm第二部分內容開始的地方寫上這樣一句程式碼:<a name="連結點名稱"></a>;在page1.htm中寫上這樣一個連結程式碼:<a href="http://blog.163.com/wb_zhaoyuwei/blog/pagw2.htm#連結點名稱">page2 的第二部分內容</a>。
7、連結到E_mail
點選一個超級連結後,將啟動客戶機上的電子郵件管理軟體給你寫信。例這行程式碼:<a href="mailto:web@webjx.com">請給我寫信</a>。一旦你點選了“請給我寫信”這個連結,將自動啟動電子郵件管理軟體(如OE)的寫信功能,並已把郵件地址加在了收信人的位址列裡了。
連結不僅可以以文字作載體,也可以以圖象作載體,而且可以以圖片的某一部分作載體,且都能實現上述這些效果,方法也相同,所不同只是載體,也就是連結的兩對方括號中間的那部分,所以不再另舉例了。
相關文章
- 在a標籤的href與onclick中使用javascript的區別JavaScript
- HTML中的標籤的使用HTML
- HTML5中audio標籤的使用HTML
- HTML中的script標籤研究HTML
- html中的其他的常用標籤HTML
- HTML中的標籤中li橫向排列HTML
- HTML表單中的input標籤HTML
- HTML標籤(基本標籤的使用)HTML
- 詢問html:frame標籤的action、page、href、forward引數.HTMLForward
- HTML 標籤的使用HTML
- 說一說 HTML 中的 script 標籤HTML
- javascript刪除字串中的html標籤JavaScript字串HTML
- html的meta總結,html標籤中meta屬性使用介紹HTML
- HTML常用標籤的使用HTML
- Jstl中標籤的使用JS
- HTML中IMG標籤總結HTML
- html中的基本織夢標籤用方HTML
- HTMl中標籤中li橫向排列的實現示例HTML
- HTML中<a>標籤無法使用垂直邊距的解決方法HTML
- js中拼接的html程式碼中的onclick事件解析錯誤JSHTML事件
- HTML框架標籤的使用-<frameset>HTML框架
- script標籤中的async和defer
- java <%!%>標籤和<%%>標籤的使用Java
- Jsp中param標籤的使用JS
- .net將資料庫中的html標籤展示資料庫HTML
- html中a標籤的下劃線怎麼去掉HTML
- html標籤使用HTML
- HTML中Progress標籤的定義及用法總結!HTML
- HTML5中關於標籤的那些事兒HTML
- 刪除字串中的html標籤程式碼例項字串HTML
- HTML 常用的標籤和屬性HTML
- 常用的HTML標籤和屬性HTML
- html中常用的標籤-表格標籤HTML
- html的基本標籤HTML
- HTML 的常用標籤HTML
- html <a>標籤的妙用HTML
- html的頭標籤HTML
- Vue 標籤中的ref屬性和refsVue