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. Metasploit的攻击实例讲解----ms10_046快捷方式图标漏洞

    不多说,直接上干货! 准备工具 1.Kali linux 2016.2(Rolling)系统  IP:  192.168.1.103 2.受害者机子(windows XP系统)   IP: 10.10 ...

  2. 浅谈贝塞尔曲线以及iOS中粘性动画的实现

    关于贝塞尔曲线,网上相关的文章很多,这里我主要想用更简单的方法让大家理解贝塞尔曲线,当然,这仅仅是我个人的理解,如有错误的地方还请大家能够帮忙指出来,这样大家才能一起进步. 贝塞尔曲线,常用到的可分为 ...

  3. UI体系的本质是结构化存在

    UI体系的本质是结构化存在: UI系统的问题需要使用结构化的思维来处理.

  4. BZOJ 3626 LCA(离线+树链剖分+差分)

    显然,暴力求解的复杂度是无法承受的. 考虑这样的一种暴力,我们把 z 到根上的点全部打标记,对于 l 到 r 之间的点,向上搜索到第一个有标记的点求出它的深度统计答案.观察到,深度其实就是上面有几个已 ...

  5. [USACO07MAR]每月的费用Monthly Expense

    题目:POJ3273.洛谷P2884. 题目大意:有n个数,要分成m份,每份的和要尽可能小,求这个情况下和最大的一份的和. 解题思路:二分答案,对每个答案进行贪心判断,如果最后得出份数>m,则说 ...

  6. 今日SGU 5.27

    SGU 122 题意:给你n个人,每个人有大于 N / 2(向上取整)的朋友,问你1这个人有一个书,每个人都想看,只能从朋友之间传递,然后最后回到了1这个人,问你 是否有解,然后有解输出路径 收获:哈 ...

  7. js实现复选框的操作-------Day41

    不知道之前的一篇为什么一直处于审核阶段.难道有哪个词语是敏感词被河蟹了? 无论了,又一次写了这篇,也算是加深记忆吧. 首先要写的是今天在进行表格数据操作时用到的对复选框checkbox的全选和全不选, ...

  8. 【计算机视觉】基于Kalman滤波器的进行物体的跟踪

    预估器 我们希望能够最大限度地使用測量结果来预计移动物体的运动. 所以,多个測量的累积能够让我们检測出不受噪声影响的部分观測轨迹. 一个关键的附加要素即此移动物体运动的模型. 有了这个模型,我们不仅能 ...

  9. thinkphp5项目--企业单车网站(一)

    thinkphp5项目--企业单车网站(一) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...

  10. 29.AngularJS 简介

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 H ...