在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. python3多线程应用详解（第二卷：多线程到底是怎么工作的）

    现在很多人都说用多线程工作快是因为多个不同任务可以同时执行,注意我说的是不同任务,要是重复做一件事达到相同效果就是画蛇添足了,其实这是个错误的说法,线程真正的本质是无法同时执行的.现在我们来看下多线程 ...

  2. android优化中国风应用、完整NBA客户端、动态积分效果、文件传输、小说阅读器等源码

    Android精选源码 android拖拽下拉关闭效果源码 一款优雅的中国风Android App源码 EasySignSeekBar一个漂亮而强大的自定义view15 android仿蘑菇街,蜜芽宝 ...

  3. MOOC（7）- case依赖、读取json配置文件进行多个接口请求-完整的测试类，含依赖测试（15）

    ddt.依赖测试.断言.测试数据写回 # -*- coding: utf-8 -*- # @Time : 2020/2/12 23:07 # @File : test_class_15.py # @A ...

  4. CSS面试题&知识点汇总

    问题&答案 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? 有两种, IE 盒子模型.W3C 盒子模型: 盒模型: 内容(content).填充(padding).边界(m ...

  5. Redis学习之热点key重建

    在Redis的生产环境中,大量客户端连接请求某一个key,但都需要从DB中获取数据,来回写数据库,如下图: <ignore_js_op> 造成的问题: 大量的线程请求数据库,造成数据库压力 ...

  6. Redis 总结精讲 看一篇成高手系统

    转自:https://blog.csdn.net/hjm4702192/article/details/80518856 本文围绕以下几点进行阐述 1.为什么使用redis2.使用redis有什么缺点 ...

  7. HDU-1403-Longest Common Substring（后缀数组的高度数组运用）

    这题要求两个串中的最长相同子串的长度.高度数组可以求一个串中的最长相同子串的长度.所以想到把两个串连起来,但是这样又会产生一些新的串(第一个串的结尾和第二个串的开头组成的)于是在两个串中间放一个'\0 ...

  8. python的IO

    格式化输出 格式化输出是指通过print()等函数向指定的地方(比如屏幕)输出指定格式的内容 格式: age = 18 name = "xiaohua" print("我 ...

  9. unittest（6）- 作业- 测试类中写多个函数

    实践作业:对多个接口发起请求,测试类中写多个测试函数 # 1. http_request import requests class HttpRequest: def http_request(sel ...

  10. Google在百慕大避税几十亿美金，为什么巨头和富豪都会选百慕大避税？

    为什么"越有钱越有钱"?为什么富豪只要不自己"作",就能让自己的财富疯狂增加?除了经营意识之外,关键他们还可以利用自己的资源.实力等去做很多看似让人不齿,但其实 ...