a标签的最重要功能是实现超链接和锚点,a标签里href属性是我们经常用的,其实它的值有很多种,可能我们往往会忽略,今天分享一下a标签的属性值及用法。
1. href=“#”:
这是一个比较常用的方法。#是标签内置的一个方法,用于网页返回顶部较多。比如在底部有个置顶的按钮,使用这个就比较方便了。
使用:<div><a href="#">返回顶部</a></div>
2.href=“url”:
这也是我们最常使用的属性值。你可以给定一个固定值,进行跳转。(本次target不做具体介绍)
target="_blank"::浏览器总在一个新打开、未命名的窗口中载入目标文档。<a href="https://www.baidu.com/" target="_blank">跳转到新页面</a>;
target="_self"::<a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。
target="_parent"::这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
target="_top"::这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
3:<a> 标签 + onclick='{jscode}' 是很常用的一种 js 运用方式
其实用js有几种方法。
I :a href="javascript:",这个方法比较常见,其中javascript:是伪协议,意思是可以让我们通过一个链接来调用javascript函数。地址不发生跳转。可以实现A标签的点击事件运行时,页面不会跳转。
II: a href="javascript:void(0)"; void是一个操作符,void(0)返回undefined,页面也不会发生跳转
III :a href="#" onclick="js_method();return false;",这个方法的意思大致是:方法点击执行了js函数后return false,页面不发生跳转。
该方法缺点:使用javascript:void(0)可能会有浏览器兼容问题,比如:在ie下使用可能造成gif动画停止播放等。
4:href=“###”:
这个方法,刚使用这个标签不久的人,不太了解。'###' 其实就是一个无意义的标签指定,也就是一个 '#' 和不存在的标签 '##' 的组合。页面中找不到命名为 '##' 的 <a> 时该链接就不会发生跳转,也就不会导致执行 onclick 中的内容时突然发生页面跳到页首的问题。说白了"###" 就是一个不是锚点的字符串 浏览器找不到也不会跳到页首,原理就是依赖了网页的报错机制,找不到就不做处理。
对于“###”这个也有些缺点,它会改变链接地址。点击完成后,你会发现地址栏里后面多了3个#。
可以根据自己的需求使用。