a标签中的javascript:;是什么

一、问题

<a>标签中href="javascript:;"表示什么意思??

<a id="jsPswEdit" class="set-item" href="javascript:;">修改密码</a> 
有一种说法是:href="javascript:;"会去解析<script></script>里面的代码,跟当前<a>标签有关的就会执行,.没关的就跳过。
是不是这样理解呢?

二、解答

1、

<a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段

这里的href="javascript:;",其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时,如果页面内容很多,有滚动条时,页面不会乱跳,用户体验更好。

2、

javascript: 是一个伪协议,其他的伪协议还有 mail:  tel:  file:  等等。

1
<a id="jsPswEdit" class="set-item" href="javascript:;">修改密码</a>

javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行,这样点击<a>时就没有任何反应。

一般在这种情况下,会给<a>绑定一个事件回调,来执行业务,如:

1
2
3
4
document.getElementById('jsPswEdit').addEventListener('click'function(e) {
  e.preventDefault();
  // 当<a>触发click时,处理业务
}, false);
我能不能这样理解:href="javascript:;"就是去掉a标签的默认行为,跟href="javascript:void(0)"是一样的?
是一样的,
void 是JavaScript 的一个运算符,void(0)就是什么都不做的意思

3、

简单来说,"javascript:"是另外一种嵌套js代码在网页中的方法
跟通过<script></script>标签嵌套js代码差不多

如点击下面链接会会执行"javascript:"后面的内容。不过不推荐这种写法。
理由是使用<a>标签href属性通常是保存超链接,用来控制页面转向

1
<a href = "javascript:alert(22);">点我</a>

三、实例

1、a标签中的javascript:;实现列表下拉

<a href="javascript:;" class="nav-link tpl-left-nav-link-list">

2、javascript:;实现页面跳转

 <button type="button" tooltip="添加栏目" class="btn btn-sm btn-azure btn-addon" onClick="javascript:window.location.href = '{:url('cate/add')}'"> <i class="fa fa-plus"></i> Add
</button>
												

a标签中的javascript:;是什么的更多相关文章

  1. <a>标签中href="javascript:;"** 为什么 style不用src**

    &src/href <!--href 用于标示资源和文档关系,src 用于替换标签内容--> <img src="xxx.jpg"/> <sc ...

  2. 在<a></a>标签中调用javascript脚本

    有时候,我们点击了<a></a>标签(除了跳转到指定链接外)想要它调用某个方法,及调用javascript脚本,该如何做: 方法1:<a href="javas ...

  3. a标签中关于javascript:void(0)的几个问题

    最近看了好几个关于<a>标签和javascript:void(0)的帖子,谨记于此,以资查阅.注:以下代码未经全面测试,但每一种方法可能会出现的情况都基本做了说明. 在做页面时,如果想做一 ...

  4. 标签中href="javascript:;"表示什么意思?

    1.标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段. 2.javascript: 是一个伪 ...

  5. <a>标签中href="javascript:;"

    javascript: 是一个伪协议,其他的伪协议还有 mail:  tel:  file:  等等. 1 <a id="jsPswEdit" class="set ...

  6. <a>标签中href="javascript:;"的意思

    <a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段. 这里的href=&q ...

  7. Web - <a>标签中href="javascript:;"

    javascript: 是一个伪协议,其他的伪协议还有 mail:  tel:  file:  等等. 1 <a id="jsPswEdit" class="set ...

  8. a标签中的javascript:void(0)和#的区别

    #包含了一个位置信息 默认的锚是#top 也就是网页的上端 而javascript:void(0)   仅仅表示一个死链接 void(0)用于执行某些处理,但是不整体刷新页面 javascript:v ...

  9. javaScript中的小细节-script标签中的预解析

    首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数( ...

随机推荐

  1. POJ 3672 水题......

    5分钟写完 水水更开心 //By SiriusRen #include <cstdio> #include <iostream> #include <algorithm& ...

  2. asp.net导出execl和图片

    个人常用导出execl方法: #region "导出文档" /// <summary> /// Export("application/ms-excel&qu ...

  3. Git 内部原理 - (7)维护与数据恢复 (8) 环境变量 (9)总结

    维护与数据恢复 有的时候,你需要对仓库进行清理 - 使它的结构变得更紧凑,或是对导入的仓库进行清理,或是恢复丢失的内容. 这个小节将会介绍这些情况中的一部分. 维护 Git 会不定时地自动运行一个叫做 ...

  4. TCP服务器如何区分不同的用户

    CS架构:使用SOCKET(一般是一个整数),当服务器侦听到连接请求的时候,accept会返回一个SOCKET(用于识别不同的连接,可以理解成,SOCKET是区分不同连接的ID).当服务器listen ...

  5. 【Educational Codeforces Round 37 B】 Tea Queue

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用一个队列来模拟排队就好. 队列放三元组(x,y,z) x表示人的下标,y和z分别表示进入和退出时间. 然后枚举时间从1到5000 ...

  6. POJ 2826 An Easy Problem!(简单数论)

    Description Have you heard the fact "The base of every normal number system is 10" ? Of co ...

  7. ListView阻尼效果

    效果图省略.. . activity_main.xml(仅仅有一个自己定义ListView) <RelativeLayout xmlns:android="http://schemas ...

  8. bzoj2843极地旅行社题解

    题目大意 有n座小岛,当中每一个岛都有若干帝企鹅. 一開始岛与岛之间互不相连.有m个操作.各自是在两个岛之间修一座双向桥,若两岛已连通则不修并输出no,若不连通就输出yes并修建.改动一个岛上帝企鹅的 ...

  9. Beta分布从入门到精通

    近期一直有点小忙,可是不知道在瞎忙什么,最终有时间把Beta分布的整理弄完. 以下的内容.夹杂着英文和中文,呵呵- Beta Distribution Beta Distribution Defini ...

  10. android ViewPager实现 跑马灯切换图片+多种切换动画

    近期在弄个项目.要求有跑马灯效果的图片展示. 网上搜了一堆,都没有完美实现的算了还是自己写吧! 实现原理利用 ViewPager 控件,这个控件本身就支持滑动翻页非常好非常强大好多功能都能用上它.利用 ...