使用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 相关文章推荐
js打开windows上的可执行文件示例
May 27 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 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
多文件上载系统完整版
2006/10/09 PHP
php 中文处理函数集合
2008/08/27 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
详解python时间模块中的datetime模块
2016/01/13 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
保安的辞职报告怎么写
2014/01/20 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
环境建议书
2015/02/04 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
公司搬迁通知
2015/04/20 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
教师工作证明范本
2015/06/12 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
python微信智能AI机器人实现多种支付方式
2022/04/12 Python