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

作者：劍過不留痕 2012-05-22 09:52:03

模擬超鏈接的用戶單擊事件，我們需要做的就是：導入外部CSS文件，Main.css，導入外部JavaScript文件Main.js（必須在導入JQuery文件之后導入）；

在正式開始本文之前，先來簡單介紹下HTML的<a>標簽：

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

通過使用 href 屬性，創建指向另外一個文檔的鏈接（或超鏈接）

通過使用 name 或 id 屬性，創建一個文檔內部的書簽（也就是說，可以創建指向文檔片段的鏈接）

本文的內容與錨的***種用法有關。

<%@ 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，調用超鏈接的單擊事件  
             $('#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;">點擊我，將調用以上超鏈接的單擊事件</span> 
     </div> 
     </form> 
 </body> 
 </html>

以上代碼的運行效果如下圖所示：

點擊超鏈接，頁面可以正常跳轉；

但點擊標簽，頁面卻不可以跳轉；

以上，在IE8和Chrome里都無法跳轉（其他瀏覽器未測試）。

所以，接下來要實現的效果，就是在點擊標簽的時候讓頁面跳轉（也就是在調用超鏈接的單擊事件時，讓頁面跳轉），且寫的代碼要少，且***是在一個地方處理，一個項不可能就一個頁面，一個頁面不可能就一個超鏈接，且不能做的太死，怎么說錨的另一個作用是書簽，別鏈接是可以跳轉了，錨的書簽作用被屏蔽了，且……。

a.forward  
{  
}

Main.js   
 /// <reference path="jquery-1.4.1-vsdoc.js" />  
   
 $(document).ready(function () {  
   
     // 使超鏈接支持click事件，方便JavaScript調用  
     $('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，調用超鏈接的單擊事件  
             $('#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;">點擊我，將調用以上超鏈接的單擊事件</span> 
     </div> 
     </form> 
 </body> 
 </html>

運行一下（截圖略），點擊標簽，頁面***跳轉，(*^__^*) 嘻嘻

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

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

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

然后3是什么呢？然后想不出來然后了。

***祝大家敲代碼愉快。

原文鏈接：http://www.cnblogs.com/return8023/archive/2012/05/19/2509177.html

【編輯推薦】

印象深刻的jQuery手風琴效果應用
支持同一頁面多次使用的jQuery插件
jQuery基本事件代碼優化
jQuery可多次使用的***插件
jQuery從入門到精通

責任編輯：張偉來源：劍過不留痕的博客

jQuery