a标签链接及其默认行为

最新推荐文章于 2024-07-26 16:58:01 发布

原创最新推荐文章于 2024-07-26 16:58:01 发布 · 3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端

js 同时被 2 个专栏收录

30 篇文章

订阅专栏

html

4 篇文章

订阅专栏

本文介绍了HTML中a标签的基本用法，包括href属性的作用及其使用方法，如URL片段定位和阻止a标签默认行为的方式。并通过示例展示了如何实现页面内跳转及取消链接跳转效果。

文章目录

1、 href属性
2、阻止a标签的默认行为

1、 href属性

<a href=" ">我是a标签</a>

href 包含超链接指向的 URL 或 URL 片段。

URL 片段是哈希标记（#）前面的名称，哈希标记指定当前文档中的内部目标位置（HTML 元素的 ID）。URL 不限于基于 Web（HTTP）的文档，也可以使用浏览器支持的任何协议。例如，在大多数浏览器中正常工作的file:、ftp:和mailto：。

注意: 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。这种行为是 HTML5 的特性。

所以当我们写 <a href="# ">我是a标签</a> 时，点击这个a标签会自动跳转到当前页面的最顶层

当前页面之间的跳转：

<style>
   .box {
        width: 500px;
        height: 1000px;
        background-color: aqua;
    }
    .box2 {
        width: 500px;
        height: 1000px;
        background-color: bisque;
    }
    a {
        display: block;
        width: 100px;
        height: 100px;
    }
</style>

<div class="box"></div>
<div class="box2" id="box2"></div>
<a href="#box2">点我</a>  
<!-- a链接里面#后的box2是id，不是class -->

点击a链接后，或跳转到当前页面中box2的div位置处。

2、阻止a标签的默认行为

2.1、href=“javascript:void(0);”

<a href="javascript:void(0);" > Click Me </a>
<!-- 或者 -->
<a href="javascript:;" > Click Me </a>

href=“javascript:void(0);” 这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不执行js函数。

为什么要使用href=”javascript:void(0);”

javascript:是伪协议，表示url的内容通过javascript执行。void(0)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作，

2.2、href="##"

<a href="##"> Click Me </a>

#是标签内置的一个方法（见上述href属性），用这种方法点击后不发生变化

2.3、οnclick=“return false;”

<a href="http://www.baidu.com" οnclick=" return false; "> Click Me </a>

当点击a标签时，JavaScript代码返回值为false，故此链接默认行为未被触发。