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

時間 2019-11-05

原文原文鏈接

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

使用<a>標籤，咱們能夠在HTML頁面上定義錨（anchor），錨有兩種用法： css

經過使用 href 屬性，建立指向另一個文檔的連接（或超連接） html

經過使用 name 或 id 屬性，建立一個文檔內部的書籤（也就是說，能夠建立指向文檔片斷的連接） java

本文的內容與錨的第一種用法有關。 jquery

<%@ 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裏都沒法跳轉（其餘瀏覽器未測試）。 this

因此，接下來要實現的效果，就是在點擊標籤的時候讓頁面跳轉（也就是在調用超連接的單擊事件時，讓頁面跳轉），且寫的代碼要少，且最好是在一個地方處理，一個項不可能就一個頁面，一個頁面不可能就一個超連接，且不能作的太死，怎麼說錨的另外一個做用是書籤，別連接是能夠跳轉了，錨的書籤做用被屏蔽了，且……。 spa

Main.js  
 /// <reference path="jquery-1.4.1-vsdoc.js" />  
$(document).ready(function () {
 $('a.forward').click(function () {  
// 使超連接支持click事件，方便JavaScript調用  
   
          location.href = $(this)[0].href;  
         return false;  
     });
  
});

a.forward  
{  
}

修改事後的頁面源碼以下：

<%@ 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>

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

好了，最後來總結一下，模擬超連接的用戶單擊事件，咱們須要作的就是：

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

給超連接添加CSS類「forward」；

而後3是什麼呢？而後想不出來而後了。

最後祝你們敲代碼愉快。