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>