搜尋
首頁web前端html教學詳解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下方都存在這一問題)。
假定我們有個fn方法,需要取到這個元素,第一個方法傳入的this是空值。
所以,比較建議的寫法是

下面程式碼則執行了subgo()函數,
< ;a href="javascript:void(0)" onclick="subgo()">點我

在這裡,javascript:void(0),沒啟實質上的作用,它僅僅是一個死鏈接,執行的函數是subgo()。
點我點我差別。
實際上 #包含了一個位置資訊預設的錨是#top 也就是網頁的上端 ,而javascript:void(0) 僅僅表示一個死鏈接,沒有任何資訊。所以呼叫腳本的時候最好用void(0)
    href一般是指向一個URL位址,也可以呼叫javascript ,如href="javascript:xxx();",文件中推薦這樣寫:xx,但是這種方法在複雜環境有時會產生奇怪的問題,盡量不要用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,不敢妄下結論。
----------------------------------------------- -------------------------------------------------- -----------------------------------------
如果在實際應用中確實是要用到標籤來回應onclick事件的。
那麼建議使用下面三種方法
1.
test
2.test
3.test
---- -------------------------------------------------- --------------------------------------------
超級連結< ;a>標記代表一個連結點,是英文anchor(錨點)的簡寫。它的作用是把目前位置的文字或圖片連接到其他的頁面、文字或圖像,這已是眾所周知了,但關於它的語法結構可能有點鮮為人知,而要用活它則必須了解其語法結構。 標記的基本語法結構是:
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>連接
  從標記的語法結構可以看出,在設定一個超級連結時有很多參數可供選擇,以實現不同的連結效果,這有點出乎意料吧? !
  其中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:對應的事件在滑鼠移出鎮接點後被觸發。
  舉幾個例子:
回到首頁
播放語音檔案
執行對應的程式
document.doc">開啟對應的文件進行加工< ;/a>
  應用技巧
  1、提供下載檔案
  有不少網友來信問,提供下載的效果怎麼做。實際上仍然是做一個超級鏈接,不過供下載的文件必須上傳到網站上。範例:有一個「網頁技巧」的檔案包可以下載,檔案名稱是「homepagejq.zip」且已上傳到網站了,則這個連結的程式碼可以這樣寫:點這裡下載「網頁技巧」檔案包
  2、在新視窗中開啟連結的網頁
  設定「target」的值為「_blank」。例:新開視窗開啟網頁「aboutme.htm」。產生此效果的代碼是:關於我......> ;。
  3、滑鼠移到鏈接,顯示一行說明文字
  設定“title”參數值,即可獲得這種效果。例:當滑鼠移到「黃山村夫」這個連結上時,顯示說明「這是一個介紹網頁製作技巧的專業網站」。這個連結的程式碼是這樣的:黃山村夫
  4、滑鼠移到一個連結上彈出一個視窗
  這是設定onmouseover參數所獲得的效果。範例:當滑鼠移到一個連結上,彈出一個視窗並在視窗中顯示「滑鼠懸停效果示範!」。這個連結的程式碼是這樣的:連結。用類似的方法可以製作當滑鼠按下後彈出提出示視窗、當滑鼠離開時彈出提示視窗的效果。
  5、連結到本頁的指定內容
  要實現連結到本頁的某一部分內容上(也就是「檔案內跳轉」),必須用參數name指定連結點的名稱。選定一塊文本,可以用name參數為其命名,以備 連結所用。所謂同一個文件內的跳躍是指當讀者在閱讀一個很長的文件的時候,若只對某部分的內容感興趣,可以採用跳躍式的閱讀方式。其基本格式為:
第二部分第一部分內容......
......... ..................................
< ;/a>第二部 實際內容......
................................ ...........
  這樣當你點擊「第二部分」這個超級連結後,就會自動轉移到「第二部分實際內容」這個地方。 「name」參數所定義的連結點名稱可以隨意取,但連結的「href」參數中的連結點名稱必須與其一致,不要忘記在前面加上「#」。
  6、連結到其它頁面的指定內容位置
  方法與上例類似,但在「href」參數中的連結點名稱前要加上網頁的檔案名稱。範例:有兩個網頁page1.htm和page2.htm ,每頁均有兩部分內容,現在要在page1.htm中製作一個超級鏈接,按下該鏈接後將轉到page2.htm的第二部分內容上。那我們可以這樣做,首先在page2.htm第二部分內容開始的地方寫上這樣一句代碼:
;在page1.htm寫上這樣一個連結代碼:page2 的第二部分內容
  7、連結到E_mail
  點擊一個超級連結後,將啟動客戶機上的電子郵件管理軟體給你寫信。例這行程式碼:請寫信給我。一旦你點擊了“請給我寫信”這個鏈接,將自動啟動電子郵件管理軟體(如OE)的寫信功能,並已把郵件地址加在了收信人的地址欄裡了。
  連結不僅可以以文字作載體,也可以以圖像作載體,而且可以以圖片的某一部分作載體,且都能實現上述這些效果,方法也相同,所不同只是載體,也就是鏈結的兩對方括號中間的部分,所以不再另舉例了。

以上是詳解html中a標籤中的onclick和href的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何驗證您的HTML代碼?如何驗證您的HTML代碼?Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript:比較Web技術HTML與CSS和JavaScript:比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML作為標記語言:其功能和目的HTML作為標記語言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容,其目的在於提供一種標準化的方式來展示信息。 1)HTML通過標籤和屬性組織網頁的各個部分,如標題和段落。 2)它支持內容與表現分離,提升維護效率。 3)HTML具有可擴展性,允許自定義標籤增強SEO。

HTML,CSS和JavaScript的未來:網絡開發趨勢HTML,CSS和JavaScript的未來:網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML:結構,CSS:樣式,JavaScript:行為HTML:結構,CSS:樣式,JavaScript:行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢HTML的未來:網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述HTML與CSS vs. JavaScript:比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:是編程語言還是其他?HTML:是編程語言還是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),