详解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 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
jQuery DOM操作实例
Mar 05 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
vue实现点击出现操作弹出框的示例
Nov 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
模仿OSO的论坛(二)
2006/10/09 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
javascript 函数使用说明
2010/04/07 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
python提示No module named images的解决方法
2014/09/29 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
python能自学吗
2020/06/18 Python
python中setuptools的作用是什么
2020/06/19 Python
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
业务助理岗位职责
2013/11/18 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
社区安全温馨提示语
2015/07/14 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
JS实现数组去重的11种方法总结
2022/04/04 Javascript
Oracle使用别名的好处
2022/04/19 Oracle
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS