使用JQuery和CSS模擬超鏈接的用戶單擊事件的實現代碼

更新時間：2012年05月23日 15:45:19 作者：

使用JQuery和CSS模擬超鏈接的用戶單擊事件的實現代碼，需要的朋友可以參考下

在正式開始本文之前，先來簡單介紹下HTML的<a>標簽：使用<a>標簽，我們可以在HTML頁面上定義錨（anchor），錨有兩種用法：
通過使用 href 屬性，創(chuàng)建指向另外一個文檔的鏈接（或超鏈接）
通過使用 name 或 id 屬性，創(chuàng)建一個文檔內部的書簽（也就是說，可以創(chuàng)建指向文檔片段的鏈接）
本文的內容與錨的第一種用法有關。

復制代碼代碼如下:

 
<%@ 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.dbjr.com.cn/">腳本之家</a> 
<br /> 
<br /> 
<span id="spanAGo" style="border: 1px solid black;">點擊我，將調用以上超鏈接的單擊事件</span> 
</div> 
</form> 
</body> 
</html> 

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

點擊超鏈接，頁面可以正常跳轉；但點擊標簽，頁面卻不可以跳轉；以上，在IE8和Chrome里都無法跳轉（其他瀏覽器未測試）。所以，接下來要實現的效果，就是在點擊標簽的時候讓頁面跳轉（也就是在調用超鏈接的單擊事件時，讓頁面跳轉），且寫的代碼要少，且最好是在一個地方處理，一個項目不可能就一個頁面，一個頁面不可能就一個超鏈接，且不能做的太死，怎么說錨的另一個作用是書簽，別鏈接是可以跳轉了，錨的書簽作用被屏蔽了，且……。

Main.css

復制代碼代碼如下:

 
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.dbjr.com.cn">腳本之家</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是什么呢？然后想不出來然后了。
最后祝大家敲代碼愉快。

首發(fā)：博客園->劍過不留痕

您可能感興趣的文章: