众所周知,a标签的最重要功能是实现超链接和锚点。而且,大多数人认为a标签最重要的作用是实现超链接,其实不单单是实现超链接的方法,今天新起点博客就来整理下a标签中href的几种用法。
1、a href=“[removed]js_method();”
这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且[removed]协议作为a的href属性的时候不仅会导致不必要的触发[removed]事件,在IE里面更会使gif动画图片停止播放。
2、a href=“javascript:js_method();”
这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window。onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句。
3、a href=“javascript:void(0);” οnclick=“js_method()”
这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。
而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。3、a href=“javascript:” οnclick=“js_method()“这种方法跟跟2种类似,区别只是执行了一条空的js代码。
4、a href=”#” οnclick=“js_method()”
这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。也是最简单也是非常实用的网页置顶方法。但是有个弊端就是使用此方法相当于给页面刷新一次,如果网页太卡的话可能不太利于用户体验。
5、a href=“#” οnclick=“js_method();return false;”
种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。综合上述,在a中调用js函数最适当的方法推荐使用:
6、a href=“https://www.henenseo.com” 绝对 URL - 指向另一个站点
此方法使用后,点击a标签时就会直接跳转到这个链接的页面
7、a href=“/seo.html” 相对 URL - 指向站点内的某个文件
点击a标签链接后会跳转到本站点中的某个链接。
8、href="#top"锚 URL - 指向页面中的锚
指定某个id点击后跳转到指向的页面或者是标签位置中。
9、href=“mailto:baidu.@163.com”
手机端使用较多。点击后对应的邮箱跳转。这种方法浏览器会自动调用系统默认的邮件客户端程序,同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址,而其他的内容都是空白,留给访问者自行填写。其他方法请看《a标签属性href的mailto多种用法》
10.href=“tel:400-445-4646”
手机端非常的使用,就是可以快捷的通过a标签拨打联系电话。