在HTML中，<a>标签的href属性用于指定超链接的目标的URL。在所有浏览器中，链接的默认外观是：

  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的（注：活动链接是“正在被打开的链接”）

示例如下所示：

  1.  
    <p>
  2.  
    <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
  3.  
     
  4.  
    <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

当<a>标签调用JS中的代码时，有以下几个方法：

  1.  
    <a href = "javascript:js_method()">文本</a>
     

    这是平台上常用的方法，但这种方法在传递this等参数时很容易出现问题，且javascript：协议作为a的href属性时不仅会导致不必要的触发window.onbeforeunload事件，在IE里面会使gif动画停止播放。W3C标准不推荐在href里面执行javascript语句。

  2. <a href = "javascript:void(0);" onclick ="js_method()">文本</a>
     

    这个是很多网站最常用的方法，也是最周全的方法，onclick负责执行js函数，而void是一个操作符，void(0)返回undefined,地址不发生跳转，且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

  3. <a href = "javascript:;" onclick = "js_merthod()">文本</a>
     

    这种方法跟第2种类似，区别只是执行了一条空的js代码。

  4. <a href ="#" onclick ="js_method()">
     

    这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以这种方法点击后网页后返回到页面的最顶端。

  5. <a href="#" οnclick="js_method();return false;">
     

    这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。

淘宝主页采用的是第2种方法，而Alibaba采用的是第1种方法，和我们的区别是每个href中的javascript方法都用try,catch包围。

综合上述，<a>标签中调用js函数适当的方法推荐使用：

  1.  
    <a href ="javascript:void(0);" onclick ="js_method()">
  2.  
    <a href = "javascript:;" onclick ="js_method()">
  3.  
    <a href = "#" onclick ="js_method();return false">

具体程序示例如下，用到了方法1：

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta http-equiv="content-Type" content="text/html" charset="utf-8">
  5.  
    <title>浏览器对象</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <h2>操作成功</h2>
  9.  
    <span id="time">5</span>秒后回到主页<a href="javascript:goBack()">返回</a>
  10.  
     
  11.  
    <script type="text/javascript">
  12.  
    var i = 5;
  13.  
    var t = setInterval(function clock(){
  14.  
    i--;
  15.  
    time.innerHTML= i;
  16.  
    if (i==1) {
  17.  
    window.location.assign("http://www.sina.com");
  18.  
    }
  19.  
    } ,1000);
  20.  
     
  21.  
    function goBack(){
  22.  
    varwindow.history.back();
  23.  
    }
  24.  
     
  25.  
    </script>
  26.  
    </body>
  27.  
    </html>

转：标签中的href如何调用js的更多相关文章

  1. <a>标签中的href如何调用js代码

    在HTML中,<a>标签的href属性用于指定超链接的目标的URL.在所有浏览器中,链接的默认外观是: 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接 ...

  2. <a>标签中的href="javascript:;"就是去掉a标签的默认行为

    <a>标签中的href="javascript:;"是什么意思? 例子:<a href="javascript:;">我的大学</ ...

  3. 正则获取a标签和a标签中的href地址

    /(<\/?a.*?>)/ a标签 /<a\b.*?</a>/ 表式以"<a "(有空格) 开始 以"</a>" ...

  4. Java中通过脚本引擎调用js函数

    import java.io.*; import javax.script.Invocable; import javax.script.ScriptEngine; import javax.scri ...

  5. <a>标签中的href伪协议 标签： html 2016-12-24 22:38 365人阅读 评论(0)

    <a id="jsPswEdit" class="set-item" href="javascript:;">修改密码</ ...

  6. a标签中的href="#"与href="javascript:void(0)"区别

    转自http://blog.csdn.net/fightplane/article/details/5190037 <a href="#"> 点击链接后,页面会向上滚到 ...

  7. A标签中通过href和onclick传递的this对象

    在blog的后台管理中允许为一个分类添加一个地址,但是不好添加onclick事件.想传递当前对象给一个函数,于是就将这个URL写成"Javascript:shoControlSidebar( ...

  8. <a>标签中的href=""

    href="javascript:;",其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现 ...

  9. <a>标签中的href="javascript:;"是什么意思？

    例子:<a href="javascript:;">我的大学</a> javascript: 是一个伪协议 javascript:是表示在触发<a&g ...

随机推荐

  1. ZooKeeper基本讲解及使用

    本文摘录于:http://blog.51cto.com/tchuairen/1859494:https://blog.csdn.net/peace1213/article/details/525714 ...

  2. 为什么jdk1.8 HashMap的容量一定要是2的n次幂

    一.jdk1.8中,对“HashMap的容量一定要是2的n次幂”做了严格控制 1.默认初始容量: [Java] 纯文本查看 复制代码 ? 1 2 3 4 /**  * The default init ...

  3. 分布式Web服务器架构（通俗易通）

    最开始,由于某些想法,于是在互联网上搭建了一个网站,这个时候甚至有可能主机都是租借的,但由于这篇文章我们只关注架构的演变历程,因此就假设这个时候已经是托管了一台主机,并且有一定的带宽了,这个时候由于网 ...

  4. 吴裕雄--天生自然HTML学习笔记：HTML 属性

    属性是 HTML 元素提供的附加信息. HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现,比如:name="v ...

  5. 关于文件下载Header设置

    常见的媒体格式类型如下: text/html : HTML格式text/plain :纯文本格式 text/xml : XML格式image/gif :gif图片格式 image/jpeg :jpg图 ...

  6. 别恐慌，大众关心的人工智能问题学界都在努力求解——我眼中的AAAI 2015大会

    2015大会" title="别恐慌,大众关心的人工智能问题学界都在努力求解--我眼中的AAAI 2015大会"> 作者:微软亚洲研究院副研究员 黄铂钧 今年是美国 ...

  7. 从Surface 3发布 看微软快速转向的根由

    3发布 看微软快速转向的根由" title="从Surface 3发布 看微软快速转向的根由"> 平地一声惊雷起,微软突然送惊喜!在毫无征兆的情况下,微软突然发布一 ...

  8. 2018年宜賓美酒文化節浮空投影舞美特效 / 2018 Yibing Wine Festival Visual Effect Projection

    客户 Client:五粮液集团 硬件 Hardware:PC,巴可投影机30,000流明*2  Barco projector 30,000 lumen*2 软件 Software:Resolume, ...

  9. 苹果又要召回iPhone 7！这到底是要闹哪样？

    7!这到底是要闹哪样?" title="苹果又要召回iPhone 7!这到底是要闹哪样?"> 现在的苹果虽然刚刚收获了史上最赚钱的一个季度--营收和利润均创下史上最 ...

  10. 使用Google App Engine开始新的网站开发学习

    继长时间的迷茫后,我发现还是回归php网站开发更适合我,或者没有那么深刻,但至少要做点事情.不知道以后将从事什么样的工作,但现在找点事情做还是很好的.所以,为了激发我学习的热情,我在网上搜了一下免费云 ...