小言_互联网的博客

HTML a标签之空链接

422人阅读  评论(0)

文章目录

<a> 标签介绍

<a>是HTML的标准标签之一,称为链接或是超链接标签。这个标签作用是定义一个锚(anchor),根据链接的目标的差异,分为两种状况:

  1. 指定一个其他文档的外部连接(href指定地址); 点击链接跳转到新的页面,是在原窗口还是新开窗口可以通过target属性设置。
<a href="https://oscar.blog.csdn.net/">我的博客</a>
  1. 创建一个本文档内部的链接。(href的值设置为#+元素的name或id),点击页面定位到指定标签的区块,适用在有滚动条的窗口。
<a href="#书签的名称">链接文字</a>

比如href.html页面有如下内容:

    <!--内部锚点-->
    <a href="#inerdiv2">Div 2</a>

    <div id="inerdiv1" style=" background-color: blueviolet;">Div 1</div>
    <div id="inerdiv2" class="even">Div 2</div>
    <div id="inerdiv3" style=" background-color: blueviolet;">Div 3</div>

页面效果如下:

但点击 以上红色框框的链接时, 浏览器会滚动并定位到Div 2区块,地址栏显示也会变化为“href.html#inerdiv2”。

在线效果演示:
http://jsrun.net/g2vKp

空链接的作用以及<a href="#"></a><a href="javascript:;"></a>的区别

在很多时候, 需要设置超链接不发生跳转,最有可能出现的场景是:

  • <a>的点击有更复杂的逻辑,需要通过onclick的函数才能完成,所以就不需要href。但是如果不加href属性,又没有超链接的页面效果,也就是不会出现下划线,以及点击之后字体样式的变化。特别是函数执行的是异步的请求,这种状况广泛的出现在一些前端框架里。

设置href属性点击不生效,称为空链接,常用的又两种方法:

  1. <a href="#"></a> , 本页链接,链接到当前页面
  2. <a href="javascript:;"></a>,空链接, 相比# , 如果有滚动条不会到顶部

这两种方式都是不产生跳转到效果。因为href可以直接识别JS的代码,所以可以使用javascript:的方式。
javascript: 是一个伪协议,通过链接调用一个javascript函数,如果函数为空,则调用的是
空函数。 javascript:;也可以写为javascript:void(0);,称为死链接,更常使用在Ajax中

  • <a href="javascript:void(0)"></a>
    但是javascript:void(0) 的使用会有一些问题,比如在IE中会引起动画停止播发等问题。 href="#"又有可能发生页面滚动,可以使用两个或多个 # 就不会发生页面的滚动了。比如
  • <a href="#####"></a> 有滚动条不会到顶部

转载:https://blog.csdn.net/oscar999/article/details/106799535
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场