详解A标签中href=""的几种用法

众所周知，a标签的最重要功能是实现超链接和锚点。而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法<a href="JavaScript:;"></a>，所以就来整理下a标签中href的几种用法。

一、js的几种调用方法（参考总结的）

1、a href="javascript:js_method();"

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

2、 a href="javascript:void(0);" onclick="js_method()"

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

3、a href="javascript:;" onclick="js_method()"

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

4、a href="#" onclick="js_method()"

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

5、a href="#" onclick="js_method();return false;"

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

综合上述，在a中调用js函数最适当的方法推荐使用：

 <a href="javascript:void(0);" onclick="js_method()"></a>
<a href="javascript:;" onclick="js_method()"></a>
<a href="#" onclick="js_method();return false;"></a>

二、href="#"的作用

a中href="#"表示回到最顶部。如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮，回到顶部，那么此时可以考虑用这种最简单的方式实现。

<span style="font-size:14px;"><a href="#">回到最顶端</a></span> 

三、href="URL"的作用

1、URL为绝对URL

此时指向另一个站点，比如href="http://write.blog.csdn.NET",那么点击时就会直接跳转到这个链接的页面。

2、URL为相对URL

此时指向站点内的某个文件，比如href="/test.doc"，那么点击时就会直接下载文件。

3、锚 URL

此时指向页面中的锚，比如href="#top"，那么点击时就会到当前页面中id="top"的这个锚点，实现当前页面的所谓跳转。用的最多就是在可滚动页面中，添加菜单，可以直接回到页面中的某个部分的内容。

即所有的三种代码样例：

 <a href="http://baidu.com">超链接</a>
<a href="#">回到最顶端</a>
<a href="css/css1.css">文件链接</a>

总结

以上所述是小编给大家介绍的A标签中href=""的几种用法 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • a标签click和href执行顺序探讨

    前提:项目中开始绑定document click事件, 在document子类的一个a标签也绑定了click时间, 想要实现效果,就是click事件触发完成后 document事件不触发.即组织事件冒泡,加了阻止事件冒泡方法(e.stopPropagation(); e.preventDefault();)也不行,这种现在只有在google下发生,ff不会发生. 原因:是超链接的href="#" 比click晚触发, 解决:在方法后面加return false;

  • a标签的href和onclick 的事件的区别介绍

    1.onclick事件先执行,如果onclick事件返回一个false值则href不再执行. 2.href="#"默认页面到锚点#top所以页面有滚动条时会跳到最上面.最好的解决办法是href="javascript:void(0);". 3.href中的返回内容会冲掉当前页面的信息.

  • A标签中通过href和onclick传递的this对象实现思路

    在blog的后台管理中允许为一个分类添加一个地址,但是不好添加onclick事件.想传递当前对象给一个函数,于是就将这个URL写成"Javascript:shoControlSidebar(this)",可是结果发现这并不可行,传递过去的参数是一个对象,但是却得不到任何其他信息.我想得到的是innerText,而这个this并非指向它所在的A标签. 这是<a href="Javascript:shoControlSidebar(this)">和<a

  • a标签的href与onclick事件的区别详解

    onclick中javascript的区别一般没用到都没注意,但出错时才有些郁闷,看文本章解释如下: 以前一直很随意,后来看.net里的linkbutton似乎是用在<a href="javascript:fun();"...>的形式,今天用这种方式就遇到一些问题,摘网友的文章和我的结论放在下面: 1.链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接): 2.假设链接中同时存在 href 与 onclick,如

  • 详解Html a标签中href和onclick用法、区别、优先级别

    如果不设置 href属性在IE6下面会不响应hover.双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题). 代码如下 <a href="javascirpt:fn(this)"> <a onclick="fn(this)"> 假定我们有个fn方法,需要取到这个元素,第一个方法传入的this是空值. 所以,比较推荐的写法是 代码如下 <a href="javascript:void(0)" onclic

  • Jquery为a标签的href赋值实现代码

    复制代码 代码如下: <script type="text/javascript"> function doTest(){ var value = $("input[name='dizhi'][type='radio']:checked").val();//获得选中项的值 $('#a1').attr('href','shoppeisong.php?addid='+value+''); } </script> 要取的INPUT 标签<in

  • javascript和jquery修改a标签的href属性

    javascript: 复制代码 代码如下: document.getElementById("myId").setAttribute("href","www.xxx.com"); document.getElementById("myId").href = "www.xxx.com"; jquery: 复制代码 代码如下: $("#myId").attr("href"

  • ajax动态为a标签href赋值不执行跳转的原因分析及解决

    ajax动态为a标签href赋值不执行跳转的原因分析及解决

    由于一中考评系统要加入一个新的功能"调查问卷",我想沿用别人做好的调查问卷,用别人的有一个好处就是:人家做的专业,界面美化等非常人性化,但是它需要你每次设置完调查问卷后发布一下网址,客户端访问的每次都是变动的地址. 客户端每次点击"调查问卷",就会跳转到相应页面:  点击"调查问卷"即进入调查问卷页面:  我使用a 标签,每次访问管理员提交的"调查问卷" 复制代码 代码如下: <li><a href=&quo

  • 在JS中a标签加入单击事件屏蔽href跳转页面

    我们常用的在a标签中有点击事件: 1. a href="JavaScript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放.W3C标准不推荐在href里面执行javascript语句 2. a href="javascript:void(0);"

  • 详解A标签中href=""的几种用法

    众所周知,a标签的最重要功能是实现超链接和锚点.而且,大多数人认为a标签最重要的作用是实现超链接,今天我刚好碰到a标签的一种写法<a href="JavaScript:;"></a>,所以就来整理下a标签中href的几种用法. 一.js的几种调用方法(参考总结的) 1.a href="javascript:js_method();" 这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的hr

  • 详解C语言中结构体(struct)的用法

    详解C语言中结构体(struct)的用法

    目录 粉丝问答 三种结构体类型变量说明 1. 先定义结构,再定义结构变量 2. 定义结构体类型的同时说明变量 3. 直接说明结构变量 结构体成员表示方法 结构体指针做参数 结构体初始化 定义变量的同时初始化 先定义在初始化 常用初始化 typedef与struct 前置声明 结构体对齐 粉丝问答 有个粉丝在群里问了这样一个问题,问题在图中已经标出,如下图. DQuestsion 头文件的结构体的定义为: typedef struct{ u8 bmRequestType; u8 bRequest;

  • 详解Android TableLayout中stretchColumns、shrinkColumns的用法

    详解Android TableLayout中stretchColumns、shrinkColumns的用法

    详解Android 中TableLayout中stretchColumns.shrinkColumns的用法 android:stretchColumns="1" android:shrinkColumns="1"这两个属性是TableLayout所特有的,也是这两个属性影响了子对象的布局. 表格布局是按照行列来组织子视图的布局.表格布局包含一系列的Tabrow对象,用于定义行(也可以使用其它子对象).表格布局不为它的行.列和单元格显示表格线.每个行可以包含个以上(

  • 详解PHP字符串替换str_replace()函数四种用法

    下面通过本文给大家分享PHP字符串替换str_replace()函数4种用法,具体内容如下所示: mixed str_replace ( mixed $search , mixed $replace , mixed $subject [, int &$count ] ) 该函数返回一个字符串或者数组.该字符串或数组是将subject中全部的search都被replace替换之后的结果. 1.$search,要替换的字符串,或数组 2.$replace,被用来替换的字符串或数组 3.$subjec

  • 详解webpack解惑：require的五种用法

    webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.include,再加上ES6的import语法,这么多岂不是会把人给搞乱.本篇就来梳理一下这些require各自的特点,以及都在什么场景下使用. commonjs同步语法 经典的commonjs同步语法如下: var a = require('./a'); a.show(); 此时webpack会将a.js

  • 详解iOS App中UiTabBarController组件的基本用法

    详解iOS App中UiTabBarController组件的基本用法

    UiTabBarController这个控制器绝对是项目架构时做常用的一个控件. 我们大致看下控件的效果,我们就知道为什么说他常见了. 这就是最简单的一个雏形,想必现在基本70%的应用界面结构都会是这样的. 在Android中我们以ActivityGroup或是现在的fragment来实现,一个容器中包含多个子控制器. 下面我们还是以建立xib文件的形式来实现一个这样的整体布局的例子. 当然在 xcode中我们会发现其实直接有这么一个模板了 但是直接使用模板后会发现是直接在代码里实现了子布局得添

  • 详解C++编程中的vector类容器用法

    详解C++编程中的vector类容器用法

    vector简介 vector是STL中最常见的容器,它是一种顺序容器,支持随机访问.vector是一块连续分配的内存,从数据安排的角度来讲,和数组极其相似,不同的地方就是:数组是静态分配空间,一旦分配了空间的大小,就不可再改变了:而vector是动态分配空间,随着元素的不断插入,它会按照自身的一套机制不断扩充自身的容量. vector的扩充机制:按照容器现在容量的一倍进行增长.vector容器分配的是一块连续的内存空间,每次容器的增长,并不是在原有连续的内存空间后再进行简单的叠加,而是重新申请

  • 详解Android开发中Activity的四种launchMode

    详解Android开发中Activity的四种launchMode

    Activity栈主要用于管理Activity的切换.当使用Intent跳转至某个目标Activity,需要根据目标Activity的加载模式来加载. Activity一共有以下四种launchMode: 1.standard:默认,每次使用Intent跳转到目标Activity时都创建一个新的实例.坏处是每次进入都要创建新的实例,执行OnCreate方法. 2.singleTop:如果要跳转的目标Activity正好在task的顶部(说明当前肯定不在目标task里,例如我在微信首页,然后想使用

  • 详解template标签用法(含vue中的用法总结)

    一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了display:none;属性. <!--当前页面只显示"我是自定义表现abc"这个内容,不显示"我是template",这是因为template标签天生不可见--> <template><div>我是template</div

随机推荐