jQuery怎么模擬超鏈接的用戶單擊事件

這篇文章主要講解了“jQuery怎么模擬超鏈接的用戶單擊事件”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“jQuery怎么模擬超鏈接的用戶單擊事件”吧！

創(chuàng)新互聯(lián)秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營(yíng)銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，微信平臺(tái)小程序開發(fā)，網(wǎng)頁(yè)設(shè)計(jì)制作，移動(dòng)網(wǎng)站建設(shè)，全網(wǎng)整合營(yíng)銷推廣幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶都以感恩的心態(tài)奉獻(xiàn)自己的專業(yè)和所長(zhǎng)。

在正式開始本文之前，先來(lái)簡(jiǎn)單介紹下HTML的<a>標(biāo)簽：

使用<a>標(biāo)簽，我們可以在HTML頁(yè)面上定義錨（anchor），錨有兩種用法：

通過(guò)使用 href 屬性，創(chuàng)建指向另外一個(gè)文檔的鏈接（或超鏈接）

通過(guò)使用 name 或 id 屬性，創(chuàng)建一個(gè)文檔內(nèi)部的書簽（也就是說(shuō)，可以創(chuàng)建指向文檔片段的鏈接）

本文的內(nèi)容與錨的***種用法有關(guān)。

<%@ 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/">劍過(guò)不留痕 - 博客園</a>          <br />          <br />          <span id="spanAGo" style="border: 1px solid black;">點(diǎn)擊我，將調(diào)用以上超鏈接的單擊事件</span>      </div>      </form>  </body>  </html>

以上代碼的運(yùn)行效果如下圖所示：

jQuery怎么模擬超鏈接的用戶單擊事件

點(diǎn)擊超鏈接，頁(yè)面可以正常跳轉(zhuǎn)；

但點(diǎn)擊標(biāo)簽，頁(yè)面卻不可以跳轉(zhuǎn)；

以上，在IE8和Chrome里都無(wú)法跳轉(zhuǎn)（其他瀏覽器未測(cè)試）。

所以，接下來(lái)要實(shí)現(xiàn)的效果，就是在點(diǎn)擊標(biāo)簽的時(shí)候讓頁(yè)面跳轉(zhuǎn)（也就是在調(diào)用超鏈接的單擊事件時(shí)，讓頁(yè)面跳轉(zhuǎn)），且寫的代碼要少，且***是在一個(gè)地方處理，一個(gè)項(xiàng)不可能就一個(gè)頁(yè)面，一個(gè)頁(yè)面不可能就一個(gè)超鏈接，且不能做的太死，怎么說(shuō)錨的另一個(gè)作用是書簽，別鏈接是可以跳轉(zhuǎn)了，錨的書簽作用被屏蔽了，且……。

jQuery怎么模擬超鏈接的用戶單擊事件

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;       });      });

修改過(guò)后的頁(yè)面源碼如下：

<%@ 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">劍過(guò)不留痕 - 博客園</a>          <br />          <br />          <span id="spanAGo" style="border: 1px solid black;">點(diǎn)擊我，將調(diào)用以上超鏈接的單擊事件</span>      </div>      </form>  </body>  </html>

運(yùn)行一下（截圖略），點(diǎn)擊標(biāo)簽，頁(yè)面***跳轉(zhuǎn)，(*^__^*) 嘻嘻

好了，***來(lái)總結(jié)一下，模擬超鏈接的用戶單擊事件，我們需要做的就是：

導(dǎo)入外部CSS文件，Main.css，導(dǎo)入外部JavaScript文件Main.js（必須在導(dǎo)入JQuery文件之后導(dǎo)入）；

給超鏈接添加CSS類“forward”；

然后3是什么呢？然后想不出來(lái)然后了。

感謝各位的閱讀，以上就是“jQuery怎么模擬超鏈接的用戶單擊事件”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)jQuery怎么模擬超鏈接的用戶單擊事件這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

本文名稱：jQuery怎么模擬超鏈接的用戶單擊事件
轉(zhuǎn)載源于：http://muchs.cn/article18/gpjcdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、云服務(wù)器、網(wǎng)頁(yè)設(shè)計(jì)公司、小程序開發(fā)、動(dòng)態(tài)網(wǎng)站、域名注冊(cè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容