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

不设置标签的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个超链接

图12-11  sample11.htm的

运行结果

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

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

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

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

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

onclick实现超链接_给超链接加onclick事件相关推荐

  1. vb microsoft.xmlhttp 获取所有超链接_利用VBA批量自动生成表格超链接

    Excel如何自动生成有超链接的Sheet目录? 如下图中所示的工作簿中,有很多个Sheet.目的是把所有的Sheet在目录表中制作成超链接的形式,点击跳转. 解决方案:录制宏+循环 下面的东西可能很 ...

  2. 在html中超链接_怎么添加html网页的超链接？

    看到许多朋友为文章的超链接感到不知所措,不知道一篇文章加多少超链接合适,也不知道如何添加文章的超链接,那么摩高互动与大家分享一下我们是如何添加文字超链接的? 超链接的介绍 超链接在本质上属于一个网页的 ...

  3. 在html中加一个超链接,怎么在html加超链接

    怎么在html加超链接 怎么在html加超链接,有很多小伙伴都不知道.接下来就让成本为各位讲解一下,欢迎阅读! 网站的各个HTML文档通过超链接的方式相互连接在一起,形成一个连贯的网站.用户可以通过点 ...

  4. 输入框超链接_如何为文字、形状、图片添加超链接？如何为超链接设置颜色？...

    你知道如何为PPT中的文字.形状.图片添加超链接吗?那么,你又知道如何设置超链接的颜色吗?接下来小编就来仔细的讲解一下吧~看图思路更清晰哦! 如何为PPT中的文字.形状.图片添加超链接? 为文字添加超 ...

  5. php超链接颜色,html超链接默认字体颜色怎么清除

    方法:1.在body中使用link.alink.vlink属性来设置其他颜色,例" ".2.先使用":link".":visited".&q ...

  6. html语言代码超链接,html 超链接 word html超链接代码

    [网页用word打开]可以直接打开word文件的超链接在网页中,怎么样... "打开/保存"是因浏览者的浏览器而异的,假如浏览者的电脑没有装word软件,那么,无论什么情况,都是打 ...

  7. html5如何取消超链接,怎样取消超链接和制作超链接

    我们在办公编辑中常常要实现一些跳转到某个页面,例如做文档目录,还有有时需要转到外部网站等等,这些就需用在word中做超链接,而有时在网上下载一资料里和了大量的超链接我们又必须把他去掉,所以今天学习啦小 ...

  8. html设置自动点击超链接,html设置超链接的方法步骤

    在html中如何设置超链接,使得点击的时候能跳转到需要的界面上去呢?下面是学习啦小编给大家整理的一些有关html设置超链接的方法,希望对大家有帮助! html设置超链接的方法 超链接的基本格式是:sc ...

  9. 给RadioButtonList这些加JS事件

    给RadioButtonList这些加JS事件 <script   language="javascript"   type="text/javascript&qu ...

最新文章

  1. 软件测试培训：如何搭建测试环境
  2. Python如何实现24个微信大群万人同步转发直播？
  3. 异常记录: Handler dispatch failed； nested exception is java.lang.NoSuchMethodError
  4. 阿里云 nginx php mysql_阿里云 Ubuntu + Nginx + PHP + MySQL
  5. volatile修饰变量
  6. python celery应用场景_python celery 模块
  7. c语言某年某月的天数switch,在C语言中 使用switch语句编写“显示某年某月的天数”程序：...
  8. 硬盘底座linux,微客智品 篇五十二：机械硬盘如何安放？用奥睿科单盘位移动硬盘底座助力新玩法...
  9. html如何与js链接,链接index.html client.js和server.js
  10. 7.override a layout
  11. css的checkbox样式,css自定义checkbox样式的方法总结
  12. 图灵机和通用计算机,数学的不完美之美——阿兰？图灵与图灵机
  13. Pro Tools播放引擎设置详解
  14. 【Apache NIFI 操作】Apache NiFi源码目录结构--nifi-nar-bundles
  15. Dataset之ImageNet：ImageNet数据集简介、下载、使用方法之详细攻略
  16. Unity使用脚本模拟Button按下
  17. ImportError: No module named urlgrabber.grabber
  18. 消防产品在酒店行业的应用
  19. （青龙面板）xdd机器人对接诺兰进行短信提交
  20. 蓝牙的定位，智能蓝牙定位追踪-新导智能

热门文章

  1. 2019河北省大学生程序设计竞赛（重现赛）B 题 -Icebound and Sequence （ 等比数列求和的快速幂取模）...
  2. Codeforces 724 C. Ray Tracing
  3. (转)SQLServer实例讲解
  4. ImageLoader设置圆形图片
  5. [C#]async和await刨根问底
  6. framework 2.0 新增的一个string.split()方法重载
  7. 技术篇(3)--QPG界面分解方法介绍
  8. jQuery --- 简单操作合集
  9. Python多线程豆瓣影评API接口爬虫
  10. 吴忠军 - 如何理解马云所说的月入两三万，三四万的人最幸福？