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


Posted in Javascript onAugust 20, 2017

众所周知,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=""的几种用法 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
JS定时器实例
Apr 17 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
vue组件name的作用小结
May 23 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 #Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 #Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 #Javascript
ES6扩展运算符的用途实例详解
Aug 20 #Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 #Javascript
Vue动态组件实例解析
Aug 20 #Javascript
jQuery实现表格冻结顶栏效果
Aug 20 #jQuery
You might like
php allow_url_include的应用和解释
2010/04/22 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
PHP异常处理浅析
2015/05/12 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
jquery.validate使用详解
2016/06/02 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
python中子类调用父类函数的方法示例
2017/08/18 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Python3 assert断言实现原理解析
2020/03/02 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
财会自我鉴定范文
2013/12/27 职场文书
大学生入党思想汇报
2014/01/14 职场文书
长城导游词
2015/01/30 职场文书
公司晚宴祝酒词
2015/08/11 职场文书