详解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 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
基于vue实现微博三方登录流程解析
Nov 04 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 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
PHP基本语法实例总结
2016/09/09 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
python基础教程之Hello World!
2014/08/29 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
社会保险接收函
2014/01/12 职场文书
社区消防工作实施方案
2014/03/21 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
小学班主任事迹材料
2014/12/17 职场文书
拾金不昧感谢信
2015/01/21 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
党性修养心得体会2016
2016/01/21 职场文书
《确定位置》教学反思
2016/02/18 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js