上海戴文 - Drupal开发 在线教育

你在这里

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

主标签

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

在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>
articles: 
评分: 

猜你喜欢

评论

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

MyBlog: http://nan.im/

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

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

是这个!~

Drupal China http://drupalchina.cn

My problem is in Firefox, I get the slider text, the read more button, and the pager item text, but I don't get any image. In Internet Explorer 7, I just get a gray box, no slider text, no button, no pager text, no image. Thea text is meant to read: "If you would like to save on you next purchase toner cartridges, visit the printer ink store online at Toner2Ink.com. They sell many brands of printer ink, MICR toner and regular cartridges at discount prices with free shipping for orders over $49." Thank you for the solution.