使用JQuery和CSS模擬超鏈接的用戶單擊事件的實現代碼
編輯：JQuery特效代碼
在正式開始本文之前，先來簡單介紹下HTML的<a>標簽：使用<a>標簽，我們可以在HTML頁面上定義錨（anchor），錨有兩種用法：
通過使用 href 屬性，創建指向另外一個文檔的鏈接（或超鏈接）
通過使用 name 或 id 屬性，創建一個文檔內部的書簽（也就是說，可以創建指向文檔片段的鏈接）
本文的內容與錨的第一種用法有關。
. 代碼如下:
<%@ 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.jb51.net/"></a>
<br />
<br />
<span id="spanAGo" style="border: 1px solid black;">點擊我，將調用以上超鏈接的單擊事件</span>
</div>
</form>
</body>
</html>
以上代碼的運行效果如下圖所示：
. 代碼如下:
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.jb51.net"></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是什麼呢？然後想不出來然後了。
最後祝大家敲代碼愉快。
首發：博客園->劍過不留痕
通過使用 href 屬性，創建指向另外一個文檔的鏈接（或超鏈接）
通過使用 name 或 id 屬性，創建一個文檔內部的書簽（也就是說，可以創建指向文檔片段的鏈接）
本文的內容與錨的第一種用法有關。
. 代碼如下:
<%@ 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.jb51.net/"></a>
<br />
<br />
<span id="spanAGo" style="border: 1px solid black;">點擊我，將調用以上超鏈接的單擊事件</span>
</div>
</form>
</body>
</html>
以上代碼的運行效果如下圖所示：
. 代碼如下:
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.jb51.net"></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是什麼呢？然後想不出來然後了。
最後祝大家敲代碼愉快。
首發：博客園->劍過不留痕
小編推薦
熱門推薦