HTML——a标签实现空链接（禁止跳转）

基本概念

空链接：指鼠标指向链接后，鼠标变成手形，但是单击链接后，仍然停留在当前页面。

解决方案

a标签href不跳转禁止跳转

当页面中a标签不需要任何跳转时，从原理上来讲，可分如下两种方法：

1.标签属性href，使其指向空或不返回任何内容。如：
<a href="javascript:void(0);" >点此无反应javascript:void(0)</a><a href="javascript:;" >点此无反应javascript:</a>
2.标签事件onclick，阻止其默认行为。如：
<a href="" onclick="return false;">return false;</a><a href="#" onclick="return false;">return false;</a>
注意：只有一个href="#"是不可以的。

原理：

标签属性href="javascript:void(0);" 关键是理解void(0)的含义。

javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值

用法格式如下：

a). javascript:void (expression)

b). javascript:void expression

你以使用 void 操作符指定超级链接。表达式会被计算但是不会当前文档处装入任何内容。所以，javascript:void(0) 仅仅表示一个死链接。

只有href="#"是不可以的，因为#包含了一个位置信息，默认的锚是#top 也就是网页的上端。我理解的锚是指网页中具体位置。

例如：

首先我们在网页body内最上面添加一个<span id="top" name="top"></span>

我们再到body内，需要出现点击后转到顶部位置添加，<a href="#top">回到顶部</a>

点击回到顶部即可让滚动回到顶部。

标签事件οnclick="return false;" 在HTML代码中，无论你在哪里放置了onclick事件，并且返回值为false时，那么该处的默认行为将不会执行。这里的默认行为是指没有Onclick事件时原本的行为。

最后，我们来回顾下a标签的三种用法：

<a href="http://www.w3school.com.cn">W3School</a><a href="index.html"> index </a><a href="#top">top</a>

参考文章

HTML——a标签实现空链接（禁止跳转）相关推荐

HTML a标签之空链接
文章目录 `` 标签介绍空链接的作用以及``和``的区别 <a> 标签介绍 <a>是HTML的标准标签之一,称为链接或是超链接标签.这个标签作用是定义一个锚(anchor), ...
如何防止空链接，跳转到网页顶端
解决办法: 普通的链接像<a href="http://www.example.com">asdf</a>这样的不会跳到顶端的, 但空链接<a hre ...
空链接，a标签herf属性，href=“#” 或者 href=“javascript:void(0)；” 或者href=“javascript:；“ 区别
目录 # 包含了一个位置信息,默认的锚是 #top 也就是网页的上端. href="javascript:void(0);" 和 href="javascript:;&q ...
5-去掉a标签下划线，禁止a标签的跳转
1.去下划线: 写样式,a{text-decoration:none; 或在a标签内联里面写style="text-decoration:none;": 2.禁用a标签跳转: a标 ...
html a标签禁止跳转,a标签href不跳转禁止跳转
a标签href不跳转禁止跳转当页面中a标签不需要任何跳转时,从原理上来讲,可分如下两种方法: 标签属性href,使其指向空或不返回任何内容.如: <a href="javascri ...
超链接标签（外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接）、注释
超链接标签在HTML中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面 1.链接的语法格式 <a href="跳转目标" target=" ...
html空链接跳转,网页中空链接几种实现方法的区别
设计蜂巢.设计蜂巢.设计蜂巢都可以实现空链接,下面来具体认识一下它们之间的区别. 一."#":"#"表示锚链接,默认为#top.如地址不存在则不会发生页面跳转. ...
如何设置使chrome新标签页中打开链接自动跳转到新标签页?
在新标签打开链接的时候这样点选 Ctrl+左键或者鼠标中键或者右键链接选择'新标签页中打开链接', 可实现出现新标签页但不自动跳转但是这个有问题, 即, 新标签只是在背景打开, 操作后并不会 ...
a标签连接空标签的方法
在写页面时,想把a标签设置成空链接,方便后面数据的连接可以有几种方法. 1. <a herf=""></a> 这种方法会默认打开本页面,重新刷新一次页面. ...

HTML——a标签实现空链接（禁止跳转）

基本概念

解决方案

参考文章

HTML——a标签实现空链接（禁止跳转）相关推荐

最新文章

热门文章