详解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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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中mkdir函数用法实例分析
2014/11/15 PHP
PHP中overload与override的区别
2017/02/13 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python加载自定义词典实例
2019/12/06 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python json读写方式和字典相互转化
2020/04/18 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
秋季运动会加油稿200字
2014/01/11 职场文书
销售内勤岗位职责
2014/04/15 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
2015年司法所工作总结
2015/04/27 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers