在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. django项目导航页_20191128

    django项目导航页_20191128 第一步:python-django电商项目-需求分析架构设计数据库设计_20191115 python-django-linux上mysql的安装和配置_20 ...

  2. SQL语言：DDL,DML,DCL,DQL,TCL

    DDL(Data Definition Language)数据库定义语言 statements are used to define the database structure or schema. ...

  3. Linux搭建nginx+php/php-fpm+mysql环境

    百度内部php框架odp有单独的nginx+php/php-fpm环境,但为了更好的实践,自己搭建一套单独的. 1.首先安装nginx 两种方式: 1)yum源安装(使用root权限)yum inst ...

  4. 吴裕雄--天生自然python学习笔记：beautifulsoup库的使用

    Beautiful Soup 库简介 Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索.修改分析树等功能.它是一个工具箱,通过解析文档为用户提供需要抓取的数据,因为简 ...

  5. 吴裕雄--python学习笔记：通过sqlite3 进行文字界面学生管理

    import sqlite3 conn = sqlite3.connect('E:\\student.db') print("Opened database successfully&quo ...

  6. 吴裕雄--天生自然 R语言开发学习：回归（续四）

    #------------------------------------------------------------# # R in Action (2nd ed): Chapter 8 # # ...

  7. Jmeter接口之响应断言详解

    响应断言 : 对服务器的响应进行断言校验 Apply to 应用范围: main sample and sub sample, main sample only , sub-sample only , ...

  8. django中间件和auth模块

    Django中间件 由django的生命周期图我们可以看出,django的中间件就类似于django的保安,请求一个相应时要先通过中间件才能到达django后端(url.views.template. ...

  9. 在CodaLab上提交MURA竞赛的结果

    What is MURA? MURA (musculoskeletal radiographs) is a large dataset of bone X-rays. Algorithms are t ...

  10. Janet Wu price

    上次也是第一次参加百公里是2012的时候,那年的主题是一路有你,和一群同事从深圳湾走到福田,最后累了就回家了,那晚应该是睡得很好吧. 今年是提前报名了,虽然还不确定是否参加.因为说实话,我不喜欢拥堵的 ...