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. 【DNN 系列】 添加模块后不显示

    添加模块后不显示分为几个原因 1.检查.dnn文件是否填写正确,要和对应的页面文件对应上 我有一步是这这个名称地方我填上了 就不显示了.这里需要注意,VIEW 的名城是不需要写的 2.重写文件 实体操 ...

  2. GridView 绑定 ObjectDataSource

    创建GridView <asp:GridView ID="GridView1" runat="server" DataSourceID="Obj ...

  3. php生成无限栏目树

    栏目数组:$arr=Array( Array('cid' => 2,'cname' => '新闻','pid' => 0),    Array('cid' => 4,'cnam ...

  4. vue中makeMap方法的使用 (定义注册一些值 后期方便使用)

    function makeMap ( str, expectsLowerCase ) { var map = Object.create(null); var list = str.split(',' ...

  5. Mac or windows eclipse配置tomcat

    1.选择window --> Preferences 首选项 2.选择server --> Runtime Environements --> Add 3.选择对应的tomcat版本 ...

  6. C#自定义事件监视变量变化

    首先监视定义类 class Event { public delegate void tempChange(object sender, EventArgs e); public event temp ...

  7. UI Framework-1: views

    views Overview and background Windows provides very primitive tools for building user interfaces. Th ...

  8. whoami---打印当前有效的用户名称

    whoami命令用于打印当前有效的用户名称,相当于执行id -un命令. 语法 whoami(选项) 选项 --help:在线帮助: --version:显示版本信息. 实例 [root@localh ...

  9. iptables指南

    在了解iptables之前我们先了解一下 防火墙 的概念防火墙是由Check Point创立者Gil Shwed于1993年发明并引入国际互联网,防火墙也是一种位于内部网络与外部网络之间的网络安全系统 ...

  10. KNN分类器

    KNN学习(K-Nearest Neighbor algorithm,K最邻近方法 )是一种统计分类器,对数据的特征变量的筛选尤其有效. 基本原理 KNN的基本思想是:输入没有标签(标注数据的类别), ...