博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
避免使用<a href="#"的问题
阅读量:5037 次
发布时间:2019-06-12

本文共 882 字,大约阅读时间需要 2 分钟。

转自:http://zhanghong.iteye.com/blog/901466 

很多人都有写这样代码的经历:

 

                  <a href="#" onclick="doSomething()">click me</a>

 

其实这样写非常不好,因为页面虽然没有跳转,但是页面会回到顶端。如果在href中链接到一个锚点,eg: href="#bookmark" ,它就会调到<a href="bookmark">的地方。那么我们什么也不用,就不会有什么情况发生了吧,其实不然,这样会在浏览器浏览历史中新增一条记录。

 

   其实我们有几种解决空连接的方法:

 

1. 用CSS

        

        .scripted-link {text-decoration:underline; cursor:pointer;}

        <span class="scripted-link" οnclick="alert(better);">

这样,一个空连接就出来了;

 

2. 用javascript:void(0);

 

<a href="javascript:void(0);" οnclick="alert('better');" class="script-link">click me</a>

 

这样页面也不会有任何跳转。

 

 

3. 我们可以在href中使用任何funciton,不过记得最后一定要return false;

如果你想你的链接不要有调转,你还可以吧href和onclick结合起来用,就是在href中使用javascript方法:

 

<a href="javascript:doSomething()">click me</a>

 

 

但是这个方法必须返回false或者void,不然的会,页面就会跳转到一个空页面,或者会显示这个方法返回的字符串。

 

<a href="javascript:doSomething(); void(0);">click me</a>

 

 

这样,这个链接既没有调转,又完成了操作。

转载于:https://www.cnblogs.com/cheng07045406/p/3698143.html

你可能感兴趣的文章
算法时间复杂度
查看>>
二叉树的遍历 - 数据结构和算法46
查看>>
类模板 - C++快速入门45
查看>>
[转载]JDK的动态代理深入解析(Proxy,InvocationHandler)
查看>>
centos7 搭建vsftp服务器
查看>>
RijndaelManaged 加密
查看>>
Android 音量调节
查看>>
HTML&CSS基础学习笔记1.28-给网页添加一个css样式
查看>>
windows上面链接使用linux上面的docker daemon
查看>>
Redis事务
查看>>
Web框架和Django基础
查看>>
python中的逻辑操作符
查看>>
CSS兼容性常见问题总结
查看>>
HDU 1548 A strange lift (Dijkstra)
查看>>
每天一个小程序—0005题(批量处理图片大小)
查看>>
C# 启动进程和杀死进程
查看>>
tcp实现交互
查看>>
IIS的各种身份验证详细测试
查看>>
JavaScript特效源码(3、菜单特效)
查看>>
聊聊、Zookeeper Linux 单服务
查看>>