使用JQuery和CSS模擬超鏈接的用戶單擊事件的實(shí)現(xiàn)代碼

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

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

在正式開(kāi)始本文之前，先來(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)。

復(fù)制代碼代碼如下:

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

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

點(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)了，錨的書簽作用被屏蔽了，且……。

Main.css

復(fù)制代碼代碼如下:

 
a.forward 
{ 
} 

Main.js

復(fù)制代碼代碼如下:

 
/// <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è)面源碼如下：

復(fù)制代碼代碼如下:

 
<%@ 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.dhdzp.com">腳本之家</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)然后了。
最后祝大家敲代碼愉快。

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

您可能感興趣的文章: