html中a标签中的onclick和href的使用(转)
下面代码则执行了subgo()函数,
<a href="javascript:void(0)" οnclick="subgo()">点我</a>
在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。
<a href="#" οnclick="subgo()">点我</a>与<a href="javascript:void(0)" οnclick="subgo()">点我</a>区别。
实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端 ,而javascript:void(0) 仅仅表示一个死链接,没有任何信息。所以调用脚本的时候最好用void(0)
href一般是指向一个URL地址,也可以调用javascript ,如href="javascript:xxx();",文档中推荐这样写:<a href=" javascript:void(0)" οnclick="xxx();">xx</a>,但是这种方法在复杂环境有时会产生奇怪的问题,尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。
我们知道链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接),如果不想执行href 属性下的动作执行,onclick 需要要返回 false ,一般是这样写οnclick="xxx();return false;".
TabPane的JS源码,由于onclick没有返回FALSE,当IFRMAE中关闭TABPANE时会导致href执行,页面显示有问题。解决办法就是将下面代码复制到使用TAB的JSP中。
------------------------------------------------------------------------------------------------------------------------------------------
至于其他楼说的【IE8中,如:"javascript:;","javascript:void(0)","javascript:void(null)"都被拒绝】因为没有安装IE8,不敢妄下结论。
------------------------------------------------------------------------------------------------------------------------------------------
那么就建议使用下面三种方法
1.<a href="javascript:void(0)" οnclick="doSomething()">test</a>
2.<a href="" οnclick="doSomething();return false">test</a>
3.<a href="" οnclick="doSomething();event.returnValue=false">test</a>
<a
class=type
id=value
href=reference
name=value
rel=same|next|parent|previous
rev=value
target=window
style=value
title=title
onclick=function
onmouseout=function
onMouseOver=function>连接</a>
从标记的语法结构可以看出,在设定一个超级链接时有很多参数可供选择,以实现不同的链接效果,这有点出乎意料吧?!
其中class和id选项:用于设定链接点所属的类型和分配的ID号,通常不加以设定。最常用的两个参数是href和name。其中href是hypertext reference的缩略词,用于设定链接地址。链接地址必须为url地址,如果没有给出具体路径,则默认路径和当前页的路径相同。链接到的文件也分为几种情况:如果为HTML文件,则在当前浏览器中直接打开;如果为可执行文件(.exe文件),则直接执行或下载,我们提供下载的文件就是用它的这种特性做的;如果为文本文件如word格式的文件,则在浏览器中打开此文件,并可以进行编辑加工。
rel:表示设定链接的关系:rel=same表示待链接的文件与此文件相同,rel=next表示待链接的文件为下一页,rel=parent表示本文件为待链接文件的父文件,rel=previous则表示待链接的文件为上一页。
rev:则用于设定反向链接。
target:是在采用帧窗口的情况下设定链接到哪一个窗口,还有target="_bank"是表示新开一窗口打开网页。
title:用于设定链接点被选到时显示的标题。
onclick:对应于一个事件,当链接点被点击后将触发这个事件,执行对应的子程序。
onmouseover:与onclick类似,对应的事件在鼠标移到链接点上时被触发。
onmouseout:对应的事件在鼠标移出镇接点后被触发。
举几个例子:
<a href="index.htm">回到主页</a>
<a href="sound.wav">播放语音文件</a>
<a href="javascipt.open()">执行对应的程序</a>
<a herf="document.doc">打开对应的文档进行加工</a>
应用技巧
1、提供下载文件
有不少网友来信问,提供下载的效果怎么做。实际上仍然是做一个超级链接,不过供下载的文件必须上传到网站上。例:有一个“网页技巧”的文件包供下载,文件名是“homepagejq.zip”且已上传到网站了,则这个链接的代码可以这样写:<a href="homepagejq.zip">点击这里下载“网页技巧”文件包</a>。
2、在新窗口中打开链接的网页
设定“target”的值为“_blank”。例:新开窗口打开网页“aboutme.htm”。产生该效果的代码是:<a href="aboutme.htm" target="_blank">关于我......</a>。
3、鼠标移到链接,显示一行说明文字
设定“title”参数值,即可获得这种效果。例:当鼠标移到“黄山村夫”这个链接上时,显示说明“这是一个介绍网页制作技巧的专业网站”。这个链接的代码是这样的:<a href="hscf.htm" title="这是一个介绍网页制作技巧的专业网站">黄山村夫</a>。
4、鼠标移到一个链接上弹出一个窗口
这是设定onmouseover参数获得的效果。例:当鼠标移到一个链接上,弹出一个窗口并在窗口中显示“鼠标悬停效果演示!”。这个链接的代码是这样的:<a href="其它网页.htm" οnmοuseοver="alert('鼠标悬停效果演示!')">链接</a>。用类似的方法可以制作当鼠标按下后弹出提出示窗口、当鼠标离开时弹出提示窗口的效果。
5、链接到本页的指定内容
要实现链接到本页的某一部分内容上(也就是“文件内跳转”),必须用参数name指定链接点的名称。选定一块文本,可以用name参数为其命名,以备链接所用。所谓同一个文件内的跳转是指当读者在阅读一个很长的文件的时候,若只对某部分的内容感兴趣,可以采用跳跃式的阅读方式。其基本格式是:
<a href="#链接点名称">第二部分</a>第一部分内容......
...........................................
<a name="链接点名称"></a>第二部分实际内容......
...........................................
这样当你点击“第二部分”这个超级链接后,就会自动转移到“第二部分实际内容”这个地方来。“name”参数所定义的链接点名称可以随意取,但链接的“href”参数中的链接点名称必须与其一致,不要忘记在前面加上“#”。
6、链接到其它页面的指定内容位置
方法与上例类似,但在“href”参数中的链接点名称前要加上网页的文件名。例:有两个网页page1.htm和page2.htm ,每页均有两部分内容,现要在page1.htm中制作一个超级链接,按下该链接后将转到page2.htm的第二部分内容上。那么我们可以这样做,首先在page2.htm第二部分内容开始的地方写上这样一句代码:<a name="链接点名称"></a>;在page1.htm中写上这样一个链接代码:<a href="pagw2.htm#链接点名称">page2 的第二部分内容</a>。
7、链接到E_mail
点击一个超级链接后,将启动客户机上的电子邮件管理软件给你写信。例这行代码:<a href="mailto:web@webjx.com">请给我写信</a>。一旦你点击了“请给我写信”这个链接,将自动启动电子邮件管理软件(如OE)的写信功能,并已把邮件地址加在了收信人的地址栏里了。
链接不仅可以以文本作载体,也可以以图象作载体,而且可以以图片的某一部分作载体,且都能实现上述这些效果,方法也相同,所不同只是载体,也就是链接的两对方括号中间的那部分,所以不再另举例了。
转载于:https://www.cnblogs.com/kjh7322-work/p/3966539.html
html中a标签中的onclick和href的使用(转)相关推荐
- java a标签正则_正则表达式:java中婚配HTML中a标签中的中文字符
正则表达式:java中匹配HTML中a标签中的中文字符 今天群里一位朋友问到了一个正则表达式的问题,有如下内容: 特432 453543 a1特123你好123吗? 特2 标签中的文字现在要匹配出内容 ...
- 视频网站中video标签中blob:http
视频网站中video标签中blob:http 一.问题场景 想下载知乎视频资源,却发现视频链接是这个样子的 blob:https://v.vzuu.com/b6146956-6e52-406d-890 ...
- css中a标签中去掉下划线注意事项
需求文件 css中a标签中去掉下划线注意事项 对于css中a 标签去掉下划线有一个注意事项代码如下: <!DOCTYPE html> <html><head>< ...
- 去掉h5播放器中voide标签中的下载按钮
去掉H5播放器中voide标签中的下载按钮,参考代码: <video width="320" height="240" controls> & ...
- html col居中无效,html中col标签中的汉字如何居中?html col标签的基本使用(内有实例)...
本篇文章主要的讲解了关于html col标签的汉字居中和col标签的一些基础的使用方法.还有html col标签的基础使用实例.现在让我们一起阅读这篇文章吧 首先我们先介绍HTML中的col标签的汉字 ...
- python提取网页中p标签中的内容_使用Python进行爬虫的初学者指南
前言 爬虫是一种从网站上抓取大量数据的自动化方法.即使是复制和粘贴你喜欢的网站上的引用或行,也是一种web抓取的形式.大多数网站不允许你保存他们网站上的数据供你使用.因此,唯一的选择是手动复制数据,这 ...
- C#正则表达式提取HTML中IMG标签中的SRC地址
百度到的一个,这里就直接贴了 http://blog.csdn.net/smeller/article/details/7108502#comments 一般来说一个 HTML 文档有很多标签,比如& ...
- html中input标签中type属性小总(包含html5新增表单属性)
前言 HTML5新增了许多属性和方法,其中一些就有input标签中 type属性. 有关于input中type的全部可取值如下 1.button 2.text 3.time(会呈现表的形状) 4. ...
- HTML中meta标签中charset属性的写法以及用法
meta标签中的charset属性是用来声明文档使用的字符编码.解决文档出现乱码的问题主要就是靠它!需要注意的是,这个charset属性的声明必须写在head中最靠前的位置,否则就可能出现乱码的问题. ...
最新文章
- Android拍照得到全尺寸图片并进行压缩/拍照或者图库选择 压缩后 图片 上传
- 越过网络层看威胁:为什么全攻击界面才是最重要的
- 【渝粤题库】国家开放大学2021春1313学前儿童卫生与保健题目
- 41 FI配置-财务会计-固定资产-组织结构-定义资产分类
- mysql中怎么实现Apriori_关联规则算法Apriori的学习与实现
- 在GridView中加入单选按钮RadioButton
- Oracle RAC的Failover
- 电商十二、pinyougou02.sql的内容③
- impalahive大数据平台数据血缘与数据地图(四)-impala血缘架构图及功能介绍
- [Wondgirl]从零开始学React Native之Text(五)
- Python:实现monte carlo蒙特卡罗算法(附完整源码)
- python利用四个坐标点对图片目标区域最小外接矩形进行裁剪
- 学习vue之前应该有哪些基础知识
- 未知USB设备(设备描述符请求失败)是什么?
- 光功率 博科交换机_FAQ-交换机是否支持查看光模块型号及收发光功率
- CA证书签发系统(web版)
- pandas判断和删除重复duplicated和drop_duplicates
- 机器人基础技术教学_乒乓球推挡技术完整攻略[基础教学]
- GridView-adaper控件设置边框-边距-实现分割效果
- GoPass系列免杀基础(一)
热门文章
- 机器狗背上枪成了无人杀手,6.5mm口径1200米射程,制造商已与美澳军队广泛合作...
- 首个卡车全栈自动驾驶系统发布:嬴彻轩辕!年内量产上路
- 计算机搞定44年几何难题,原来这2个人25年前猜对了
- 他用波士顿动力机器狗拉人力车!网友:这是我见过最蒸汽朋克的事情
- 独家揭秘!史上最强中文NLP预训练模型 | 直播报名中
- FFmpeg代码实现视频剪切
- nginx配置访问密码,让用户输入用户名密码才能访问
- 微软Windows Server 2008之二计算机名称
- UVA 315 :Network (无向图求割顶)
- 表的垂直拆分和水平拆分