a链接调用js的几种情况

我们都知道a标签是作为一个链接来进行跳转的,但有时候我们想做出类似这样的效果,比方说点击链接时并不想立马跳转,而是想触发一些js的效果,例如函数,ajax等,下面就列举几种这样的情况

1、当作返回按钮使用

想必返回按钮大家都不陌生,网页中使用率非常高,但很多人都是把它的地址写死,写成上个页面的地址, 但这种做法有时并不恰当,正确做法是:

<a href="#" onclick="javaScript:history.back(-1);">返回</a>

或者是

<a href="#" onclick="javascript:history.Go(-1);">上一页</a>

这样能准确返回上次浏览的网页

如果上述两行代码在某些环境下失效,例如在iPhone的Safari上不起作用,那么分别修改为以下形式:

<a href="#" onclick="javaScript:window.history.back();return false;">返回</a>

<a href="#" onclick="javascript:history.Go(-1);return false;">上一页</a>

2、触发js函数,点击处理数据,而不是跳转

<a href="javascript:void(0);" onclick="js_method()">链接名</a>

这是最常用,也是最好用的一种形式.这里,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。

或者是

 <a href="javascript:;" onclick="js_method()">上一页</a>

区别只是执行了一条空的js代码。

3、还是触发js事件,区别只是执行了一条空的js代码

<a href="#" onclick="js_method();return false;">链接名</a>

执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。

当然,a链接还有其他的用途,如设置锚点等,这里就不介绍了,朋友们还有更使用的技巧,欢迎补充!

发表评论

发表回复

沙发空缺中,还不快抢~