在正式開始本文之前，先來簡單介紹下HTML的<a>標(biāo)簽：
使用<a>標(biāo)簽，我們可以在HTML頁面上定義錨（anchor），錨有兩種用法：
- 通過使用 href 屬性，創(chuàng)建指向另外一個(gè)文檔的鏈接（或超鏈接）
- 通過使用 name 或 id 屬性，創(chuàng)建一個(gè)文檔內(nèi)部的書簽（也就是說，可以創(chuàng)建指向文檔片段的鏈接）
本文的內(nèi)容與錨的第一種用法有關(guān)。
<!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" >劍過不留痕 - 博客園</a>
<br />
<br />
<span id="spanAGo" style="border: 1px solid black;">點(diǎn)擊我，將調(diào)用以上超鏈接的單擊事件</span>
</div>
</form>
</body>
</html>
?
以上代碼的運(yùn)行效果如下圖所示：
點(diǎn)擊超鏈接，頁面可以正常跳轉(zhuǎn)；
但點(diǎn)擊標(biāo)簽，頁面卻不可以跳轉(zhuǎn)；
以上，在IE8和Chrome里都無法跳轉(zhuǎn)（其他瀏覽器未測(cè)試）。
所以，接下來要實(shí)現(xiàn)的效果，就是在點(diǎn)擊標(biāo)簽的時(shí)候讓頁面跳轉(zhuǎn)（也就是在調(diào)用超鏈接的單擊事件時(shí)，讓頁面跳轉(zhuǎn)），且寫的代碼要少，且最好是在一個(gè)地方處理，一個(gè)項(xiàng)目不可能就一個(gè)頁面，一個(gè)頁面不可能就一個(gè)超鏈接，且不能做的太死，怎么說錨的另一個(gè)作用是書簽，別鏈接是可以跳轉(zhuǎn)了，錨的書簽作用被屏蔽了，且……。
?
a.forward
{
}
?
$(document).ready(function () {
// 使超鏈接支持click事件，方便JavaScript調(diào)用
$('a.forward').click(function () {
location.href = $(this)[0].href;
return false;
});
});
?
修改過后的頁面源碼如下：
<!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" >劍過不留痕 - 博客園</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)簽，頁面完美跳轉(zhuǎn)，(*^__^*) 嘻嘻
好了，最后來總結(jié)一下，模擬超鏈接的用戶單擊事件，我們需要做的就是：
- 導(dǎo)入外部CSS文件，Main.css，導(dǎo)入外部JavaScript文件Main.js（必須在導(dǎo)入JQuery文件之后導(dǎo)入）；
- 給超鏈接添加CSS類“forward”；
- 然后3是什么呢？然后想不出來然后了。
- 最后祝大家敲代碼愉快。
出處： http://www.cnblogs.com/return8023/archive/2012/05/19/2509177.html
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
