在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. linux centos的安装及一些相关知识的整理

    相关知识点        ***网桥:主机和虚拟机之间使用"桥接"网络组网 VMware 0 ***Net适配器:把本地网中虚拟机的ip地址转换为主机的外部网络地址 ***仅主机适 ...

  2. [LC] 295. Find Median from Data Stream

    Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...

  3. percent|Cane|confess|ballot|conceal

    You got 20 percent of the answers right - that means one in every five.你20%的答案是对的,也就是说每5个中有1个是对的. N- ...

  4. CF-1117C-Magic Ship

    二分 C - Magic Ship GNU C++11 Accepted 31 ms 1700 KB #include "bits/stdc++.h" using namespac ...

  5. CentOS7下MySQL5.7的安装-RPM方式

    Installing MySQL on Linux Using RPM Packages 下载安装包 mysql下载地址:https://dev.mysql.com/downloads/mysql/ ...

  6. LG_2869_[USACO07DEC]美食的食草动物Gourmet Grazers

    题目描述 Like so many others, the cows have developed very haughty tastes and will no longer graze on ju ...

  7. 《JavaScript算法》二分查找的思路与代码实现

    二分查找的思路 首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素),则搜索过程结束,否则进行下一步. 如果目标元素大于或者小于中间元素,则在数组大于或小于中间元素的那一半 ...

  8. Luogu_2876_[USACO07JAN]解决问题Problem Solving

    题目描述 过去的日子里,农夫John的牛没有任何题目. 可是现在他们有题目,有很多的题目. 精确地说,他们有\(P(1 \leq P \leq 300)\)道题目要做. 他们还离开了农场并且象普通人一 ...

  9. Angular系列一：Angular程序架构

    Angular程序架构 Angular程序架构 组件:一段带有业务逻辑和数据的Html服务:用来封装可重用的业务逻辑指令:允许你向Html元素添加自定义行为模块: 环境搭建 安装nodeJs安装好no ...

  10. 关于sql拼接的知识点 where1=1

    String sql="select * from tab_route where 1 = 1 "; 这样不会报错,而且可以根据情况,再去拼接sql 可以使用if(){}else{ ...