使用JQuery和CSS模拟超链接用户单击事件

HTML超链接基础与问题背景

在展开具体实现之前，先简要回顾HTML中<a>标签的基本功能。利用该标签，开发者可以在网页中定义锚点，主要包含两种应用场景：

借助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="https://www.jb51.net/">本站</a>
<br />
<br />
<span id="spanAGo" style="border: 1px solid black;">点击我，将调用以上超链接的单击事件</span>
</div>
</form>
</body>
</html>

上述代码的运行效果如下图所示：

模拟点击的实现方案

直接点击超链接，页面可正常跳转；然而点击span标签时，页面并未发生跳转。经测试，在IE8和Chrome浏览器中均无法实现跳转（其他浏览器情况未验证）。因此，接下来的目标是实现点击span标签时触发页面跳转（即模拟超链接的单击事件），同时要求代码精简、逻辑集中处理，且不能破坏锚点原有的书签功能。

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="https://www.jb51.net">本站</a>
<br />
<br />
<span id="spanAGo" style="border: 1px solid black;">点击我，将调用以上超链接的单击事件</span>
</div>
</form>
</body>
</html>

实现步骤总结

运行测试（截图略），点击span标签后，页面成功跳转。总结一下，要实现模拟超链接的用户单击事件，核心步骤包括：

引入外部CSS文件Main.css，并引入外部JavaScript文件Main.js（注意：必须在引入JQuery文件之后加载）；

为需要支持模拟点击的超链接添加CSS类“forward”；

然后3是什么呢？然后想不出来然后了。

最后祝大家编码顺利。

首发：博客园->剑过不留痕