onclick实现超链接_给超链接加onclick事件

在动态网页中,常常需要在单击超链接时处理一些数据,而不是跳转一个网页。在这种情况下,通常有以下三种处理方式:

不设置标签的href属性,只设置onclick属性。在这种处理方式下,通常超链接文本会和正文的文本以相同的形式出现,即不会有默认的下划线。当鼠标放在超链接上也不会显示小手的形状(除非为该超链接设置了CSS)。因此,用户很难知道这是一个可以点击的超链接。

将标签的href属性值设置为"#",并设置onclick属性。在这种处理方式下,用户可以很明显地看出哪些文字是超链接。在单击该超链接时,也可以执行onclick属性值中的JavaScript语句,并且不会跳转网页。但是,由于href的属性值为"#",浏览器会自动跳转到当前网页的顶部。如果当前网页内容比较多,浏览器窗口出现下拉滚动条时,可以很明显地看到跳转,而这种跳转往往不是网页设计者的          本意。

在没有为标签设置onclick属性时,如果单击了该超链接,浏览器会加载href属性中的URL。如果href属性值并不是一个URL,而是一个JavaScript语句的话,那么浏览器就会执行该语句。因此,可以直接将JavaScript语句写在标签的href属性值中,让href属性代替onclick属性。在这种处理方式下,既可以响应click事件,又可以不让网页跳转。

在标签的href属性值中添加JavaScript语句之前,必须要先使用"javascript:"语句来声明href属性值中的语句为JavaScript语句。否则,浏览器会将href属性值中的JavaScript语句当成是URL进行加载。请看代码清单12-11,注意加粗的文字。

代码清单12-11  在超链接中使用事件

在超链接中使用事件

第1个超链接

第2个超链接

第3个超链接

2b2eabefcdad2e42f51c01f8e8a92b25.png

图12-11  sample11.htm的

运行结果

在本例中创建了3个超链接,这3个超链接的处理方式如下所示:

第1个超链接中,没有设置href属性,因此,从图12-11中看起来好像只是一行文字,并且鼠标放在上面的时候,也不会显示小手的形状。因此,很难让用户知道这是一个可以点击的超链接。但是如果用户单击了该超链接,会弹出一个警告框,而且单击警告框中的【确定】按钮之后,不会跳转到任何URL上。

第2个超链接中,href属性值为"#",如果单击该超链接,先会执行onclick属性值中的JavaScript,弹出一个警告框。在单击警告框中的【确定】按钮之后,浏览器会自动跳转到当前网页的顶部。

第3个超链接中,直接将JavaScript语句写在href属性值中。在单击该超链接时,可以执行href属性值中的JavaScript语句,而且不会有任何跳转。

读者可以自己运行该文件查看效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/259747.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 布局以及优化资料汇总

2019独角兽企业重金招聘Python工程师标准>>> 1.性能优化之布局优化 2.Android 开源库 V - Layout 转载于:https://my.oschina.net/zhugenqiang/blog/822942

mysql字符集排序规则_Mysql 字符集及排序规则

一、字符集字符集:就是用来定义字符在数据库中的编码的集合。常见的字符集:utf8、Unicode、GBK、GB2312(支持中文)、ASCCI(不支持中文)二、字符集排序规则作者本人用的是utf8_general_ci后缀ci (case insensitive)意味不区分大小写(大小写不敏感)&#x…

驱动06.触摸屏驱动程序

1.触摸屏的简介 触摸屏是标准的输入设备,在写驱动程序时采用的之前讲过的输入子系统那套框架。我们无需关心对设备文件的操作,只需关心对硬件寄存器的操作和上报事件即可。 触摸屏是附在LCD上的一层薄膜,并不是我们平时认识的触摸屏&#xff…

2016国产开源软件Top100(Q1)

2016国产开源软件Top100(Q1) 随着互联网的发展、开放标准的普及和虚拟化技术的应用等诸多IT新领域的创新及拓展,开源技术凭借其开放性、低成本、稳定性、灵活性、安全性和技术创新性等特点迅速走向成熟,逐步发展成为一种主流模式,日益改变着全…

mysql lenenc int_MySQL-NonMySQL同步工具源码解读——确定同步位置

经过上一节的鉴权过后,程序已经受主库认可,并且可以像主库发起同步请求。在发起请求之前,还有一个可选的步骤:确认同步时间点。同步时间点由两个属性进行标识:Binlog文件名、偏移量。工具支持自定义时间点,…

DancingLinks刷题集

HDU 3663 Power Stations 精确覆盖 题意&#xff1a;每个城市i有xi->yi天可以成为发射站&#xff0c;发射站覆盖范围为与该站有一条边链接的城市。 同时&#xff0c;每个每天城市必须且只能被一个发射站覆盖 天数D<5。 每个城市的发射站关闭后就不再开启。即只能选择一段…

【web前端优化】前端无优化,庸人自扰之!

前言 我发现一个人厉害不只是他厉害&#xff0c;他的名字也一定要跟着厉害才行&#xff0c;比如我刀狂剑痴叶小钗了&#xff0c;若是老夫叫做刀狂剑痴叶小草&#xff0c;估计就缺少气势了&#xff01;&#xff01;&#xff01; 又如百世经纶一页书&#xff0c;如果叫做百世经纶…

sourceTree添加git密钥步骤

给多个远程服务器比如https://github.com/wangjian2014/wjtest/blob/master/wj.txt添加public密钥 本地服务器添加private密钥 SSH Client 选择PuTTY/Plink 选择Generate&#xff0c;生成public 和private密钥&#xff0c;将public密钥数据复制到远程服务器上面 保存private…

background-size

background-size:contain;contain:包含 按比例调整图片&#xff0c;使得图片的宽度自适应容器的宽度。 相当于在ps中&#xff0c;约束比例设置原始图片的宽度值等于容器的宽度值。 如果图片过大&#xff0c;等比压缩后容器的高度方向上可能会有空白。 background-size:cover;co…

MySQL5.6免安装配置与“系统找不到指定的文件”错误

1.下载免安装版本的mysql-5.6.11-winx64 (本机 win7 64位)2.将文件解压到任意&#xff0c;不要有中文&#xff08;有中文的情况没试过&#xff0c;不过最好避免这种情况&#xff09;3.配置mysql 环境变量&#xff0c;在 path后面加上D:\Program Files\mysql-5.6.11-winx64\bin…

Source Insight基本使用和快捷键

为什么要用Source Insight呢&#xff1f;貌似是因为比完整的IDE要更快一些&#xff0c;比较利于查看大量的代码。 软件的安装很简单&#xff0c;设置好安装目录。 配置好文档路径&#xff0c;当然这个也可以在Options里面改&#xff0c;选Options->Preferences…里面的Folde…

powerquery mysql数据库_window 10 下 --excel | power query 通过 ODBC链接 mysql 数据库

excel链接到mysql的方法有几种&#xff0c;今天主要介绍如何通过ODBC链接odbc是 “开放数据库连接”&#xff0c;你可以通过下载插件使得自己的excel可以连接到不同的数据库。关于版本的选择&#xff0c;就是excel版本obdc版本mysql obdc版本(需要一样)第一步 下载mysql odbc…

table样式

一直以来&#xff0c;css和JS都是软肋&#xff0c;因为需要不得不重新温故。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style type"text/css">table.hover…

MAC和XCODE常用快捷键

摘自&#xff1a;http://www.cnblogs.com/yjmyzz/archive/2011/01/25/1944325.html 1. 文件CMD N: 新文件CMD SHIFT N: 新项目CMD O: 打开CMD S: 保存CMD SHIFT S: 另存为CMD W: 关闭窗口CMD SHIFT W: 关闭文件2. 编辑CMD [: 左缩进CMD ]: 右缩进CMD CTRL LEFT: …

数组与内存控制

注&#xff1a;我已对本文章进行了更新&#xff0c;劳烦移步。 java语言是典型的静态语言&#xff0c;因而&#xff0c;数组也是静态的&#xff0c;即当该数组被初始化之后&#xff0c;该数组的长度是不可变的。java 语言的数组变量是引用类型&#xff0c;什么意思呢&#xff1…

NRedis-Proxy - 高性能中间件服务器

2019独角兽企业重金招聘Python工程师标准>>> 高性能中间件服务器 一、 NRedis-Proxy 介绍 NRedis-Proxy 是一个Redis中间件服务&#xff0c;第一个Java 版本开源Redis中间件&#xff0c;无须修改业务应用程序任何代码与配置&#xff0c;与业务解耦&#xff1b;以Spr…

CVE-2014-4877 wget: FTP Symlink Arbitrary Filesystem Access

目录 1. 漏洞基本描述 2. 漏洞带来的影响 3. 漏洞攻击场景重现 4. 漏洞的利用场景 5. 漏洞原理分析 6. 漏洞修复方案 7. 攻防思考 1. 漏洞基本描述 0x1: Wget简介 wget是一个从网络上自动下载文件的自由工具&#xff0c;支持通过HTTP、HTTPS、FTP三个最常见的TCP/IP协议下载&am…

mysql-nt.exe w3wp.exe cpu 100%_w3wp.exe(IIS ) CPU 占用 100% 的常见原因及解决办法

对于IIS管理员来说&#xff0c;经常会碰到Web服务器CPU占用100%的情况&#xff0c;以下是个人的日常工作总结和一些解决办法&#xff0c;主要用来剖析w3wp.exe(IIS )占用CPU 100%的一些原因 和解决方案&#xff0c;希望能对你有所帮助w3wp.exe的解释:全名&#xff0c;IIS Appli…

TOP结果详解

2019独角兽企业重金招聘Python工程师标准>>> TOP前5行 top - 16:24:25 up 284 days, 4:59, 1 user, load average: 0.10, 0.05, 0.01 top 当前时间、系统启动时间、当前系统登录用户数目、平均负载&#xff08;1分钟,10分钟,15分钟&#xff09;。平均负载&#x…

BZOJ3236 [Ahoi2013]作业

昨天晚上做的。。。差错一直查到今天 最后没办法问管理员要了数据才知道原来ans数组开小了233&#xff0c;简直沙茶 这道题不就是裸的莫队嘛 ||| 只要用树状数组维护当前的两种个数即可。 1 /**************************************************************2 Problem: 3…