jQuery模擬超鏈接的用戶單擊事件
在正式開始本文之前，先來簡單介紹下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)。
- <%@ 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.cnblogs.com/return8023/">劍過不留痕 - 博客園</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)（其他瀏覽器未測試）。
所以，接下來要實(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
- {
- }
- Main.js
- /// <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;
- });
- });
修改過后的頁面源碼如下：
- <%@ 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.cnblogs.com/return8023">劍過不留痕 - 博客園</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
【編輯推薦】
