使用JQuery和CSS模拟超链接的用户单击事件的实现代码


Posted in Javascript onMay 23, 2012

在正式开始本文之前,先来简单介绍下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="https://3water.com/">三水点靠木</a> 
<br /> 
<br /> 
<span id="spanAGo" style="border: 1px solid black;">点击我,将调用以上超链接的单击事件</span> 
</div> 
</form> 
</body> 
</html>

以上代码的运行效果如下图所示:

使用JQuery和CSS模拟超链接的用户单击事件的实现代码

点击超链接,页面可以正常跳转;但点击标签,页面却不可以跳转;以上,在IE8和Chrome里都无法跳转(其他浏览器未测试)。所以,接下来要实现的效果,就是在点击标签的时候让页面跳转(也就是在调用超链接的单击事件时,让页面跳转),且写的代码要少,且最好是在一个地方处理,一个项目不可能就一个页面,一个页面不可能就一个超链接,且不能做的太死,怎么说锚的另一个作用是书签,别链接是可以跳转了,锚的书签作用被屏蔽了,且……。

使用JQuery和CSS模拟超链接的用户单击事件的实现代码

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://3water.com">三水点靠木</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是什么呢?然后想不出来然后了。
最后祝大家敲代码愉快。

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

Javascript 相关文章推荐
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
基于jquery tab切换(防止页面刷新)
May 23 #Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 #Javascript
js面向对象 多种创建对象方法小结
May 21 #Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 #Javascript
游览器中javascript的执行过程(图文)
May 20 #Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 #Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 #Javascript
You might like
PHP+DBM的同学录程序(3)
2006/10/09 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
Python反射和内置方法重写操作详解
2018/08/27 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
Python多图片合并PDF的方法
2019/01/03 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python常见数字运算操作实例小结
2019/03/22 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
应届生保险求职信
2013/11/11 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
入党积极分子评语
2014/05/04 职场文书
个人自荐材料
2014/05/23 职场文书
房屋买卖协议样本
2014/11/16 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
贷款收入证明格式
2015/06/24 职场文书
环保宣传语大全
2015/07/13 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
Python装饰器详细介绍
2022/03/25 Python