用jQuery去除链接虚线
日期:2009-04-12 分类:前端技术
链接点击后会出现虚线框,因为链接一般都有跳转页面,所以不容易看出来。如果没有跳转或阻止了这个行为的话,就能很明显的看到虚线。这个虚线在某些情况下会影响美观,所以可以考虑把它去掉。虽然在《去除点击链接时出现的虚线框》中说了几种方法,而且一起使用也能兼容 IE 和 FF ,但未免麻烦了点。前两天看到使用 jQuery 解决这个问题问题的方法,很简单,而且兼容性很好,所以把它“拿”过来了。具体代码如下:
$(function(){
$('a').bind('focus',function(){
if(this.blur){ //如果支持 this.blur
this.blur();
};
});
});
细心的您可能发现了按钮点击后也会出现虚线框,那就一起把它去掉吧:
$(function(){
$('a,input[type="button"],input[type="submit"]').bind('focus',function(){
if(this.blur){ //如果支持 this.blur
this.blur();
};
});
});
很简单吧,简单的都没有什么技术含量了。。。
虽然虚线很小但在干净页面很影响美观
其实我的观点是:如果链接跳转了,可以不去掉虚线;
如果没有跳转,就可以考虑把虚线去掉。
不错 收藏了!
dudo:这其实是一个画蛇添足的功能,去掉outline给键盘导航使用者带来极大的不便!
现在web UI界面为了一些美观因素 取消outline的情况大有所在