如何去掉超链接文字点击后的灰色框?

如何去掉超链接文字点击后的灰色框?

在web开发的过程中,你有可能会遇到这样的问题,就是当点击了一个超链接的文字后,文字周围会有虚线,有的时候为了考虑更加美观需要去掉这个虚线,如何去呢?

通过研究可以通过JavaScript的方法来去除,通过纯的JavaScript和jquery两种方法来解决这个问题,下面做一下简要介绍。

  1. 可以通过纯粹的JavaScript来实现,只要在页面的head标签里加入以下代码即可:
    <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>
  2. 可以通过jquery来实现。
    <script type="text/javascript">
    $(function(){
    	$('a').bind('focus', function(){
    		this.blur();
    	});
    });
    </script>
0
Your rating: None

评论

东方龙马
User offline. Last seen 1 小时 52 秒 ago. Offline
Joined: 01/15/2009
是这个!~

是这个!~

yoyo198624
User offline. Last seen 12 周 11 小时 ago. Offline
Joined: 06/13/2010
你们说的是不是html中a标签的css属性outline?

你们说的是不是html中a标签的css属性outline?

貌似我平常用的就是a{outline:none;}这样会有浏览器诧异?

anyLiv
User offline. Last seen 2 周 2 天 ago. Offline
Joined: 05/29/2010
 但该方法也有缺点,对于使用 tab

 但该方法也有缺点,对于使用 tab 键切换焦点及不使用鼠标的用户会无法定位焦点到该链接上,这样的牺牲往往是不值得的。而如果将 focus 事件修改为 click 事件的话虽然可以使用 tab 定位焦点,但在点击的瞬间还是会有一个虚线框。开发者可以根据自己的实际情况选择合适的解决方案。

 MyBlog: http://anyLiv.com/