在正式開始本文之前，先來簡單介紹下HTML的<a>標簽：
使用<a>標簽，我們可以在HTML頁面上定義錨（anchor），錨有兩種用法：
- 通過使用 href 屬性，創建指向另外一個文檔的鏈接（或超鏈接）
- 通過使用 name 或 id 屬性，創建一個文檔內部的書簽（也就是說，可以創建指向文檔片段的鏈接）
本文的內容與錨的第一種用法有關。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Web.WebForm2" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head id="Head1" runat="server"> 6 <title></title> 7 <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> 8 <script type="text/javascript"> 9 $(document).ready(function () { 10 11 // 單擊spanAGo，調用超鏈接的單擊事件 12 $('#spanAGo').click(function () { 13 $('#aGo').click(); 14 }); 15 }); 16 </script> 17 </head> 18 <body style="font-size: 12px;"> 19 <form id="form1" runat="server"> 20 <div> 21 <a id="aGo" href="http://www.cnblogs.com/return8023/">劍過不留痕 - 博客園</a> 22 <br /> 23 <br /> 24 <span id="spanAGo" style="border: 1px solid black;">點擊我，將調用以上超鏈接的單擊事件</span> 25 </div> 26 </form> 27 </body> 28 </html>
以上代碼的運行效果如下圖所示：
點擊超鏈接，頁面可以正常跳轉；
但點擊標簽，頁面卻不可以跳轉；
以上，在IE8和Chrome里都無法跳轉（其他瀏覽器未測試）。
所以，接下來要實現的效果，就是在點擊標簽的時候讓頁面跳轉（也就是在調用超鏈接的單擊事件時，讓頁面跳轉），且寫的代碼要少，且最好是在一個地方處理，一個項目不可能就一個頁面，一個頁面不可能就一個超鏈接，且不能做的太死，怎么說錨的另一個作用是書簽，別鏈接是可以跳轉了，錨的書簽作用被屏蔽了，且……。
Main.css
1 a.forward 2 { 3 }
Main.js
1 /// <reference path="jquery-1.4.1-vsdoc.js" /> 2 3 $(document).ready(function () { 4 5 // 使超鏈接支持click事件，方便JavaScript調用 6 $('a.forward').click(function () { 7 location.href = $(this)[0].href; 8 return false; 9 }); 10 11 });
修改過后的頁面源碼如下：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Web.WebForm2" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head id="Head1" runat="server"> 6 <title></title> 7 <link type="text/css" rel="Stylesheet" href="Styles/Main.css" /> 8 <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> 9 <script type="text/javascript" src="Scripts/Main.js"></script> 10 <script type="text/javascript"> 11 $(document).ready(function () { 12 13 // 單擊spanAGo，調用超鏈接的單擊事件 14 $('#spanAGo').click(function () { 15 $('#aGo').click(); 16 }); 17 }); 18 </script> 19 </head> 20 <body style="font-size: 12px;"> 21 <form id="form1" runat="server"> 22 <div> 23 <a id="aGo" class="forward" href="http://www.cnblogs.com/return8023">劍過不留痕 - 博客園</a> 24 <br /> 25 <br /> 26 <span id="spanAGo" style="border: 1px solid black;">點擊我，將調用以上超鏈接的單擊事件</span> 27 </div> 28 </form> 29 </body> 30 </html>
運行一下（截圖略），點擊標簽，頁面完美跳轉，(*^__^*) 嘻嘻
好了，最后來總結一下，模擬超鏈接的用戶單擊事件，我們需要做的就是：
- 導入外部CSS文件，Main.css，導入外部JavaScript文件Main.js（必須在導入JQuery文件之后導入）；
- 給超鏈接添加CSS類“forward”；
- 然后3是什么呢？然后想不出來然后了。
- 最后祝大家敲代碼愉快。
首發：博客園->劍過不留痕，歡迎轉載，前提是注明出處：http://www.cnblogs.com/return8023/archive/2012/05/19/2509177.html
最后，誰可以告訴我，在博文未發表之前，怎么獲取博文的地址？我想把地址用在“轉載請注明出處：”的后面！先行謝過！O(∩_∩)O~