`
zpball
  • 浏览: 898205 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html中a标签中的onclick和href的使用

阅读更多
下面代码则执行了subgo()函数,

<a href="javascript:void(0)" onclick="subgo()">点我</a>

在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。

<a href="http://blog.163.com/wb_zhaoyuwei/blog/#" onclick="subgo()">点我</a>与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。

实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端 ,而javascript:void(0) 仅仅表示一个死链接,没有任何信息。所以调用脚本的时候最好用void(0)

    href一般是指向一个URL地址,也可以调用javascript ,如href="javascript:xxx();",文档中推荐这样写:<a href="http://blog.163.com/wb_zhaoyuwei/blog/ javascript:void(0)" onclick="xxx();">xx</a>,但是这种方法在复杂环境有时会产生奇怪的问题,尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

    我们知道链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接),如果不想执行href 属性下的动作执行,onclick 需要要返回 false ,一般是这样写onclick="xxx();return false;".

TabPane的JS源码,由于onclick没有返回FALSE,当IFRMAE中关闭TABPANE时会导致href执行,页面显示有问题。解决办法就是将下面代码复制到使用TAB的JSP中。

------------------------------------------------------------------------------------------------------------------------------------------



至于其他楼说的【IE8中,如:"javascript:;","javascript:void(0)","javascript:void(null)"都被拒绝】因为没有安装IE8,不敢妄下结论。



------------------------------------------------------------------------------------------------------------------------------------------



如果在实际应用中确实是要用到<a>标签来响应onclick事件的。
那么就建议使用下面三种方法
1.<a href="javascript:void(0)" onclick="doSomething()">test</a>
2.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();return false">test</a>
3.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();event.returnValue=false">test</a>

--------------------------------------------------------------------------------------------------

超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像,这已是众所周知了,但关于它的语法结构可能有点鲜为人知,而要用活它则必须了解其语法结构。<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="http://blog.163.com/wb_zhaoyuwei/blog/index.htm">回到主页</a>
<a href="http://blog.163.com/wb_zhaoyuwei/blog/sound.wav">播放语音文件</a>
<a href="http://blog.163.com/wb_zhaoyuwei/blog/javascipt.open()">执行对应的程序</a>
<a herf="document.doc">打开对应的文档进行加工</a>
  应用技巧

  1、提供下载文件

  有不少网友来信问,提供下载的效果怎么做。实际上仍然是做一个超级链接,不过供下载的文件必须上传到网站上。例:有一个“网页技巧”的文件包供下载,文件名是“homepagejq.zip”且已上传到网站了,则这个链接的代码可以这样写:<a href="http://blog.163.com/wb_zhaoyuwei/blog/homepagejq.zip">点击这里下载“网页技巧”文件包</a>。

  2、在新窗口中打开链接的网页

  设定“target”的值为“_blank”。例:新开窗口打开网页“aboutme.htm”。产生该效果的代码是:<a href="http://blog.163.com/wb_zhaoyuwei/blog/aboutme.htm" target="_blank">关于我......</a>。

  3、鼠标移到链接,显示一行说明文字

  设定“title”参数值,即可获得这种效果。例:当鼠标移到“黄山村夫”这个链接上时,显示说明“这是一个介绍网页制作技巧的专业网站”。这个链接的代码是这样的:<a href="http://blog.163.com/wb_zhaoyuwei/blog/hscf.htm" title="这是一个介绍网页制作技巧的专业网站">黄山村夫</a>。

  4、鼠标移到一个链接上弹出一个窗口

  这是设定onmouseover参数获得的效果。例:当鼠标移到一个链接上,弹出一个窗口并在窗口中显示“鼠标悬停效果演示!”。这个链接的代码是这样的:<a href="http://blog.163.com/wb_zhaoyuwei/blog/其它网页.htm" onmouseover="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="http://blog.163.com/wb_zhaoyuwei/blog/pagw2.htm#链接点名称">page2 的第二部分内容</a>。

  7、链接到E_mail

  点击一个超级链接后,将启动客户机上的电子邮件管理软件给你写信。例这行代码:<a href="mailto:web@webjx.com">请给我写信</a>。一旦你点击了“请给我写信”这个链接,将自动启动电子邮件管理软件(如OE)的写信功能,并已把邮件地址加在了收信人的地址栏里了。

  链接不仅可以以文本作载体,也可以以图象作载体,而且可以以图片的某一部分作载体,且都能实现上述这些效果,方法也相同,所不同只是载体,也就是链接的两对方括号中间的那部分,所以不再另举例了。
分享到:
评论

相关推荐

    详解Html a标签中href和onclick用法、区别、优先级别

    本文主要分享一篇关于Html A标签中href和onclick用法、区别、优先级别,具有很好的参考价值,有需要了解的朋友可以看看

    A标签中通过href和onclick传递的this对象实现思路

    在blog的后台管理中允许为一个分类添加一个地址,但是不好添加onclick事件。想传递当前对象给一个函数,于是就将这个URL写成”[removed]shoControlSidebar(this)”,可是结果发现这并不可行,传递过去的参数是一个...

    html超链接a标签的href跳转跟onclick之间执行顺序示例介绍

    html超链接a标签的href跳转跟onclick之间执行关系:如果onclick返回false,则a不进行跳转,如果onclick返回true,则a跳转,感兴趣的朋友可以了解下本

    详解a标签添加onclick事件的几种方式

    我们常用的在a标签中有点击事件: 1. a href=”[removed]js_method();” rel=”external nofollow” 这种方法在传递this等参数的时候很容易出问题,而且[removed]协议作为a的href属性的时候不仅会导致不 必要的触发...

    标签中的href如何调用js代码.pdf

    html中,在标签中设的href调用js代码,共有以下几种方式 &lt;a href ="javascript:void(0);" onclick ="js_method()"&gt; &lt;a href = "javascript:;" onclick ="js_method()"&gt; &lt;a href = "#" onclick ="js_method();...

    a标签href属性和onclick事件的比较介绍

    当鼠标点击a标签的时候会先执行 onclick事件, 然后才是 href 属性下的动作,如果不想执行href 属性下的动作执行,onclick 需要要返回false,感兴趣的朋友可以了解下

    HTML中button标签点击实现页面跳转的三种方法

    方法1:使用onclick事件 &lt;input type=button value=按钮 onclick=javascrtpt:[removed].href='http://www.baidu.com/' /&gt;  或者直接使用button标签 &lt;button onclick=[removed].href = '...

    ASP.Net电子商务网站后台模板

    &lt;li id="now1a"&gt;&lt;a title="标签管理" href="#" target="content3"&gt;标签管理&lt;/span&gt;&lt;/a&gt; &lt;li id="now1b"&gt;&lt;a title="模板管理" onclick="show_title('生成文件管理')" href="#" target="content3"&gt; 模板管理&lt;/span&gt;...

    [removed].href IE下跳转失效的解决方法

    代码如下: &lt;a&gt;GoNext&lt;/a&gt; $(“a”).click(function(){ [removed].href = “xxx.html”;...在onclick事件中加return false来阻止冒泡: 代码如下: $(“a”).click(function(){ [removed].href = “xxx.html”;

    简单易用的自定义标签分页显示

    简单,简易使用 package auvtech; import java.io.IOException; import javax.servlet.jsp.JspException; import javax.servlet.jsp.JspWriter; import javax.servlet.jsp.tagext.TagSupport; public class ...

    JS基础学习教程

    &lt;a href="#" onclick="alert('Hello world')"&gt;Link&lt;/a&gt;不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像...

    编译的 HTML 帮助文件 (.chm) DHTML手册

    document 对象在主文档的任意时间均可用,但是对于目前正在轻便动态 HTML(DHTML) 行为中使用的 HTML 组件(HTC)来说却不可用。这是因为轻便的行为仅当在 HTC 文件中不使用 document 对象时才可被定义。结果将使得轻便...

    GreyFrame v0.4

    你无需写弹出的脚本代码(如: onclick事件), 只要你在超链接标签&lt;a&gt;中的target属性设置为框架名称就可以了. 例如: 脚本中创建一个遮罩弹出框架: myGreyFrame = new GreyFrame("MyGreyFrame"); 这里MyGreyFrame是...

    javascript函数的解释

    例:&lt;a href= "a.html" onclick="location.href='b.html';return false"&gt;dfsadf&lt;/a&gt; 52.JS的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number, Object,RangeError,ReferenceError,RegExp,String,...

    价值2000元的苹果cms电影网站后台带采集源码PHP,电影网站源码.rar

    &lt;a target="_self" href="javascript:void(0)" onclick="MAC.FAV('http://www.maccms.com','苹果CMS');"&gt;加入收藏&lt;/a&gt; MAC.Open(u,w,h) 弹出网页;u=网址,w=宽度,h=高度 MAC.Cookie.Set(name,value,days) 设置...

    js使用小技巧

    HTML标签 document.documentElement.innerHTML 第一个style标签 document.styleSheets[0] style标签里的第一个样式 document.styleSheets[0].rules[0] 防止点击空链接时,页面往往重置到页首端。 &lt;a href=...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -重命名AccordionPanel为AccordionPane (这也是在Asp.net AJAX中使用的名称). +所有的面板默认有两个集合属性(Toolbars和Items). -尽管TabStrip, From, Tree, Accordion继承了Items属性,但是你并不能对其设置...

    javascript动态添加删除tabs标签的方法

    本文实例讲述了javascript动态添加删除tabs标签的方法。分享给大家供大家参考。具体实现方法如下: &lt;html&gt; &lt;HEAD&gt; &lt;TITLE&gt;网页对话&lt;/TITLE&gt; &lt;LINK href="style.css" type=text/css rel=...

    视频分享系统源码 VideoSharingSystem.rar

    " onClick="Sign(@Sign@)" class="quick_link _checklogin"&gt;签到&lt;/a&gt;提示框css 如+100积分 DataScoreMark(@DataId@) //评分调用 PlS(@DataId@) //评论调用 检测手机访问跳转代码,放在之间,自己可灵活使用 ...

Global site tag (gtag.js) - Google Analytics