如何去掉超链接文字点击后的灰色框?
在web开发的过程中,你有可能会遇到这样的问题,就是当点击了一个超链接的文字后,文字周围会有虚线,有的时候为了考虑更加美观需要去掉这个虚线,如何去呢?
通过研究可以通过JavaScript的方法来去除,通过纯的JavaScript和jquery两种方法来解决这个问题,下面做一下简要介绍。
<script type="text/javascript"> window.onload=function(){ var aLinks=document.getElementsByTagName('a'); for(var i=0;i<aLinks.length;i++) { aLinks[i].onfocus=function(){ this.blur(); }; } } </script>
<script type="text/javascript"> $(function(){ $('a').bind('focus', function(){ this.blur(); }); }); </script>
评论
是这个!~
你们说的是不是html中a标签的css属性outline?
貌似我平常用的就是a{outline:none;}这样会有浏览器诧异?
但该方法也有缺点,对于使用 tab 键切换焦点及不使用鼠标的用户会无法定位焦点到该链接上,这样的牺牲往往是不值得的。而如果将 focus 事件修改为 click 事件的话虽然可以使用 tab 定位焦点,但在点击的瞬间还是会有一个虚线框。开发者可以根据自己的实际情况选择合适的解决方案。
MyBlog: http://anyLiv.com/