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

AS3容易被忽略的一些特性

1.给sprite设置背景色 给sprite设置背景色,spr.opaqueBackground 0xFFCC33, 在尺寸变化的时候自动重绘背景。需要注意的是背景不能接受鼠标事件,接受鼠标事件的话,需要用graphics绘制背景。 2.在ByteArray里writeUTF("中方汉字")&…

每天一个JavaScript实例-canvas绘图

<!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8" /> <title>每天一个JavaScript实例-canvas绘图</title> <style>.canvas{width:600px;height:500px;} </s…

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

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

驱动06.触摸屏驱动程序

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

编码文件AndroidStudio初体验:解决Execution failed for task ':TestAndroid:compileDebug'.

最近研究编码文件&#xff0c;稍微总结一下&#xff0c;以后继续补充&#xff1a; Execution failed for task :TestAndroid:compileDebug.有各种各样原因&#xff0c;具体就请自己进cmd编译看什么地方出错 进入项目的gradle文件地点目录打 gradlew compileDebug --stacktrace来…

我的大二

一不小心就已经大二了&#xff0c;时间真的过的很快&#xff0c;不知不觉和学长大大一起走过了7个多月~我是个很幸运的人&#xff0c;对此我感激所有人&#xff0c;尤其是那些爱我的&#xff0c;以及教会我做人&#xff0c;指引我许多的人们&#xff01; 不得不承认&#xff0c…

2016国产开源软件Top100(Q1)

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

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

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

DancingLinks刷题集

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

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

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

react源码解读 {createClass}

对一个框架源码的解读&#xff0c;既有利于更深入地了解框架&#xff0c;使用上更得心应手&#xff0c;又可以学习到其中代码组织的思路&#xff0c;吸收其精华简洁的写法以便于日常工作上使用。下面我就挑选近年大热门react&#xff08;15.3.1&#xff09;&#xff0c;从中剖析…

mysql分析sql语句性能_sql语句执行性能分析

explain根据上面提到的explain去比较&#xff0c;就可以得出结果了mysql> explain select * from users limit 1000,20;---------------------------------------------------------------------------------| id | select_type | table | type | possible_keys | key | key…

sourceTree添加git密钥步骤

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

[tomcat] 配置数据源介绍

从tomcat5.5开始,内置了DBCP数据源的实现。tomcat数据源提供两种配置方式,两种数据源的访问范围不同&#xff0c; 1.全局数据源:顾名思义在tomcat应用下的所有web都可以访问。 2.局部数据源&#xff1a;适用单个web应用 ★★ 不管以那种方式都得提供特定数据源的jdbc驱动。 此…

background-size

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

在mybatis用mysql的代码块_关于Mybatis 中使用Mysql存储过程的方法

1.存储过程的简介我们常用的操作数据库语言SQL语句在执行的时候需要要先编译&#xff0c;然后执行&#xff0c;而存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集&#xff0c;经编译后存储在数据库中&#xff0c;用户通过指定存储过程的名字并给定参数(如果该存储…

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…

安装配置OSA运维管理平台

1、下载完整包V1.0.2wget http://www.osapub.com/download/OSA_BETA_V1.0.2.tar.gzV1.0.5wget http://www.osapub.com/download/OSA_BETA_V1.0.5.tar.gz 2、解压安装tar xvf OSA_BETA_V1.0.5.tar.gzmv osa /usr/local/ PS&#xff1a;该版本只允许指向/usr/local/osa/目录&…

as5300g2 nas软件功能_【浪潮混闪存储AS5300G5-可同时提供SAN和NAS两种服务的中端混闪存储系统】价格_厂家 - 中国供应商...

功能特性极速性能(1)平台升级&#xff1a;G5采用全新一代硬件平台&#xff0c;芯片升级、规格升级&#xff0c;性能同比上一代平均提升30%&#xff0c;为提高存储系统的数据处理效率提供有力支撑。同时结合G5的智能软件&#xff0c;如智能缓存加速、智能分层、智能QOS等高级功能…