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. 1893. [国家集训队2011]等差子序列(bitset)

    ★★   输入文件:nt2011_sequence.in   输出文件:nt2011_sequence.out   简单对比时间限制:0.3 s   内存限制:512 MB [试题来源] 2011中国 ...

  2. canvas为什么你指定一个比较小的宽高,但它实际占位却很多?

    ccanvas默认的宽高占位是:300*150  px  所以当你画一个普通的举行,你指定的宽高小于默认宽高的时候,通过审查元素发现周围都是空白的.

  3. OpenGL编程逐步深入(十一)组合变换

    准备知识 在前面的几节教程中,我们已经提到过几种变换,为物体在3D世界中的移动提供的极大的灵活性.但是我们还有很多东西需要学习(如摄像机控制和透视投影),你可以已经猜到,我们需要將这些变换组合起来.在 ...

  4. Framework3.5安装(Windows8.1)

    在用到Android逆向助手,使用时提示安装Framework3.5,Windows7都有Framework3.5,Windows8却没有,联网更新就算了,这龟速更新得多久.但是问题总还是要解决,随便 ...

  5. JSONObject与JSONArray的使用区别

    1.JSON 1. 创建一个JSONObject对象: package com.yunos.tv.video.resource.controller.web; import java.util.Arr ...

  6. JavaScript总结(2)

    <!--脚本部分-->06 <script type="text/javascript">07 date_object=new Date();08 what ...

  7. mysql语句判断一天操作记录的个数

    话说有一文章表article,存储文章的添加文章的时间是add_time字段,该字段为int(5)类型的,现需要查询今天添加的文章总数并且按照时间从大到小排序,则查询语句如下: 1    select ...

  8. oracle(sql)基础篇系列(四)——数字字典、索引、序列、三范式

    数字字典表 --查看当前用户下面有哪些张表 select * from user_tables; select table_name from user_tables; --查看当前用户下面有哪些视图 ...

  9. 20180929 北京大学 人工智能实践:Tensorflow笔记03

    更改的程序部分如下: 另: 难?????????????见链接: https://www.bilibili.com/video/av22530538/?p=17 + (完)

  10. selenium的安装(2)

    selenium的安装:  1):selenium的在线按:使用dom的cmd打开命令提示符窗口.然后敲上这个命令可以安装了==> 安装命令 pip install selenium 删除命令: ...