在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. python语法基础-基础-控制语句

    ###############    if条件控制语句    ############### # 以下实例 x 为 0-99 取一个数,y 为 0-199 取一个数,如果 x>y 则输出 x,如 ...

  2. Telnet和SSH区别

    首先,telnet和ssh都是连接远程计算机的连接协议,可以完成对完成计算机的控制,方便维护.其次,他们都是基于TCP/IP协议下的,所以连接时都需要知道目标机的网址或者域名,第三,他们都是与远程主机 ...

  3. 阿里云系统安装部署Freeswitch

    1.安装vim apt-get install vim 2.修改镜像源 将/etc/apt/source.list的原有源注释掉,添加下面的源: deb http://mirrors.163.com/ ...

  4. Hashtable和Hashmap的区别？

    1.实现的继承的父类不同 Hashtable继承Dictionary类    HashMap继承abstractMap类 两个类都实现了Map接口 2.线程安全性不同 Hashmap线程是不安全的 H ...

  5. UFT三种录制方式

    1.正常录制(Normal Recording) QTP默认的录制模式,这种录制模式是QTP最突出的特点,是直接对对象的操作,可以说此类模式继承了对象模型的所有优点,能够充分发挥对象库的威力.它通过识 ...

  6. basecalling|vector mark|Assembly的难题|

    生物信息学 染色体可以据染色图谱判断染色体号码,1-22号染色体依次变短,它们影响机体发育,23号染色体决定性别.肿瘤是由于遗传密码变异造成的.因此,遗传密码的解读非常重要,但是因为遗传密码长度非常长 ...

  7. linux增加history时间戳

    增加环境变量到/etc/profile export HISTTIMEFORMAT="%Y-%m-%d %H:%M:%S " export HISTSIZE=9999

  8. Android 粘合剂'Binder'

    背景知识 要详细掌握Android 的Binder通信机制需要先提前了解一些通信原理与Linux系统的基础知识. RPC RPC(Remote Procedure Call),即远程过程调用,也被称为 ...

  9. MFC中文件对话框类CFileDialog详解及文件过滤器说明

    当前位置 : 首页 » 文章分类 :  开发  »  MFC中文件对话框类CFileDialog详解及文件过滤器说明 上一篇 利用OpenCV从摄像头获得图像的坐标原点是在左下角 下一篇 Word中为 ...

  10. 5.7之sql_model

    问题发生背景 今天在部署项目的时候发现,测试后台接口,直接报 500,仔细一看原来是操作数据库的时候报错了,在本地测试的时候是没遇到类似的问题,数据库的版本是一样的,后面查找资料,说是 MySQL 5 ...