溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“jQuery怎么模擬超鏈接的用戶單擊事件”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“jQuery怎么模擬超鏈接的用戶單擊事件”吧！
在正式開始本文之前，先來簡單介紹下HTML的<a>標簽：
使用<a>標簽，我們可以在HTML頁面上定義錨（anchor），錨有兩種用法：
通過使用 href 屬性，創(chuàng)建指向另外一個文檔的鏈接（或超鏈接）
通過使用 name 或 id 屬性，創(chuàng)建一個文檔內(nèi)部的書簽（也就是說，可以創(chuàng)建指向文檔片段的鏈接）
本文的內(nèi)容與錨的***種用法有關。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Web.WebForm2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { // 單擊spanAGo，調(diào)用超鏈接的單擊事件 $('#spanAGo').click(function () { $('#aGo').click(); }); }); </script> </head> <body style="font-size: 12px;"> <form id="form1" runat="server"> <div> <a id="aGo" href="http://www.cnblogs.com/return8023/">劍過不留痕 - 博客園</a> <br /> <br /> <span id="spanAGo" style="border: 1px solid black;">點擊我，將調(diào)用以上超鏈接的單擊事件</span> </div> </form> </body> </html>以上代碼的運行效果如下圖所示：
點擊超鏈接，頁面可以正常跳轉(zhuǎn)；
但點擊標簽，頁面卻不可以跳轉(zhuǎn)；
以上，在IE8和Chrome里都無法跳轉(zhuǎn)（其他瀏覽器未測試）。
所以，接下來要實現(xiàn)的效果，就是在點擊標簽的時候讓頁面跳轉(zhuǎn)（也就是在調(diào)用超鏈接的單擊事件時，讓頁面跳轉(zhuǎn)），且寫的代碼要少，且***是在一個地方處理，一個項不可能就一個頁面，一個頁面不可能就一個超鏈接，且不能做的太死，怎么說錨的另一個作用是書簽，別鏈接是可以跳轉(zhuǎn)了，錨的書簽作用被屏蔽了，且……。
a.forward { }Main.js /// <reference path="jquery-1.4.1-vsdoc.js" /> $(document).ready(function () { // 使超鏈接支持click事件，方便JavaScript調(diào)用 $('a.forward').click(function () { location.href = $(this)[0].href; return false; }); });修改過后的頁面源碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Web.WebForm2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <link type="text/css" rel="Stylesheet" href="Styles/Main.css" /> <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="Scripts/Main.js"></script> <script type="text/javascript"> $(document).ready(function () { // 單擊spanAGo，調(diào)用超鏈接的單擊事件 $('#spanAGo').click(function () { $('#aGo').click(); }); }); </script> </head> <body style="font-size: 12px;"> <form id="form1" runat="server"> <div> <a id="aGo" class="forward" href="http://www.cnblogs.com/return8023">劍過不留痕 - 博客園</a> <br /> <br /> <span id="spanAGo" style="border: 1px solid black;">點擊我，將調(diào)用以上超鏈接的單擊事件</span> </div> </form> </body> </html>運行一下（截圖略），點擊標簽，頁面***跳轉(zhuǎn)，(*^__^*) 嘻嘻
好了，***來總結一下，模擬超鏈接的用戶單擊事件，我們需要做的就是：
導入外部CSS文件，Main.css，導入外部JavaScript文件Main.js（必須在導入JQuery文件之后導入）；
給超鏈接添加CSS類“forward”；
然后3是什么呢？然后想不出來然后了。
感謝各位的閱讀，以上就是“jQuery怎么模擬超鏈接的用戶單擊事件”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對jQuery怎么模擬超鏈接的用戶單擊事件這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
