使用CSS和JQuery,模拟超链接的用户单击事件
在正式开始本文之前,先来简单介绍下HTML的<a>标签: 使用<a>标签,我们可以在HTML页面上定义锚(anchor),锚有两种用法:
- 通过使用 href 属性,创建指向另外一个文档的链接(或超链接)
- 通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接)
本文的内容与锚的第一种用法有关。
<!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.cnblogs.com/return8023/">剑过不留痕 - 博客园</a><br /><br /><span id="spanAGo" style="border: 1px solid black;">点击我,将调用以上超链接的单击事件</span></div></form>
</body>
</html>
以上代码的运行效果如下图所示:
点击超链接,页面可以正常跳转; 但点击标签,页面却不可以跳转; 以上,在IE8和Chrome里都无法跳转(其他浏览器未测试)。 所以,接下来要实现的效果,就是在点击标签的时候让页面跳转(也就是在调用超链接的单击事件时,让页面跳转),且写的代码要少,且最好是在一个地方处理,一个项目不可能就一个页面,一个页面不可能就一个超链接,且不能做的太死,怎么说锚的另一个作用是书签,别链接是可以跳转了,锚的书签作用被屏蔽了,且……。
a.forward
{
}
$(document).ready(function () {// 使超链接支持click事件,方便JavaScript调用$('a.forward').click(function () {location.href = $(this)[0].href;return false;});});
修改过后的页面源码如下:
<!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.cnblogs.com/return8023">剑过不留痕 - 博客园</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是什么呢?然后想不出来然后了。
- 最后祝大家敲代码愉快。
出处:http://www.cnblogs.com/return8023/archive/2012/05/19/2509177.html
使用CSS和JQuery,模拟超链接的用户单击事件相关推荐
- Web中的HTML、css、jQuery、js
<h2>欢迎来到宋老板和泡泡龙的<strong>爱七甜蜜</strong>的故事 </h2><hr color="red"/& ...
- 前端HTML CSS JavaScipt JQuery
Web前端基础 应用程序分类 客户端/服务器 Client/Server CS模式 用户需要下载客户端才能使用.如微信.QQ.游戏等. 特点:功能丰富,安装繁琐.需要更新.平台不同,软件不同,开发成本 ...
- html+js+css 调用jquery 工人信息管理功能(增删改查)前端实现,以及调用实现鼠标拖尾粒子效果的js库
html + js + css 调用jquery以及underscore.min.js(配合代码实现鼠标粒子效果)实现全前端信息管理基本功能(增删改查) 先附上我运行的一段视频,手机打开清晰一点或者直 ...
- HTML+CSS+javascript+jQuery面试题(31)
1.$()是什么? $符号是jQuery框架对外暴露的全局变量,是window对象的属性 $()代表jQuery核心函数,可接收一个函数.字符串.DOM元素. $(function(){});//推荐 ...
- web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...
- 前端基础(HTML,CSS,JavaScript,jQuery)
文章目录 `HTML` 基础 `HTML`文件的基本结构 标签 属性 转义字符 元素之间的关系 常用标签 基本 列表 图片 表格 嵌套页面 表单 `form`提交表单的属性: `GET`请求的特点 ` ...
- Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述 功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行 环境配置: Jdk1.8 + Tomcat8 ...
- jquery模拟LCD 时钟
查看效果网址:http://keleyi.com/keleyi/phtml/jqtexiao/24.htm 以下是HTML文件源代码: 1 <!DOCTYPE html PUBLIC " ...
- html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目
前言 就在几天前,在b站的某博主那里看见了一个面试的模拟,意外看到那个同学有一个todoList的项目 很显然,这个项目就和本次我所要展示的项目代码原理一致,但是界面上我这个就会不太美观. 知识点 本 ...
最新文章
- 非准确率至上,这些趋势在2020年的AI领域更受关注
- MSSQL数据库C#操作类(SQLHELPER类的修改版)
- sql查询php,SQL查询或PHP?
- Spring Boot Learning(模版引擎)
- python 网络框架twisted基础学习及详细讲解
- 关于table的那些用法(一)
- 汉字-生僻字:生僻字目录2
- 20日直播预告丨一则ORA-600案例分析
- 关于预编译和Stdafx.h的若干问题
- 生命真的很脆弱,理性看待过劳
- Linux操作系统基础知识学习
- osgi java web_在Tomcat中使用Java Web应用程序的OSGi软件包
- 考研算法语言C,2017年华南理工大学硕士研究生算法语言(C)考试大纲
- Oracle bpm实现oa,谈谈BPM、工作流引擎与OA的关系
- WinRAR去广告实现
- 交叉熵和相对熵(KL散度)
- QQ vx 刷屏神器!!
- python自主学习——Unicode
- Spring Boot系列 —(一)手把手搭建 SpringBoot 项目
- 修改sim卡号码 android,android 如何动态修改SIM卡应用名称 MT6572 MT6589