详解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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
jQuery is()函数用法3例
May 06 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
javascript定时器完整实例
Feb 10 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
vue递归获取父元素的元素实例
Aug 07 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
Yii框架表单提交验证功能分析
2017/01/07 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Python探索之SocketServer详解
2017/10/28 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
大学生通用个人自我评价
2014/04/27 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS