一起CSS

当前位置:一起CSS > 前端技术 > 文章正文

用jQuery去除链接虚线

链接点击后会出现虚线框,因为链接一般都有跳转页面,所以不容易看出来。如果没有跳转或阻止了这个行为的话,就能很明显的看到虚线。这个虚线在某些情况下会影响美观,所以可以考虑把它去掉。虽然在《去除点击链接时出现的虚线框》中说了几种方法,而且一起使用也能兼容 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();
		};
	});
});

查看Demo

很简单吧,简单的都没有什么技术含量了。。。

查看:4,740 评论:20 标签:,,

相关日志

已经有 20 条群众意见

  1. keelii

    呵呵!沙发了。最近也在研究JQuery,的确很好很强大。 对话

    #1
  2. 亿富豪

    我看了那示例的代码,没发现两个DIV有什么区别,为什么只有第二个变了呢,是js控制的吗? 对话

    #2
  3. 青色亿富豪

    是的,在 jquery 里选择了第二个 div ,查看“源代码”可以看到的。 对话

    #3
  4. 亿富豪

    我刚才发个好像链接没删被屏蔽了,现在有很多网站的DIV
    源码的li只写前一部分,无这样写有什么好处吗? 对话

    #4
  5. 青色亿富豪

    是吗?没发现啊,是哪个网站? 对话

    #5
  6. 亿富豪

    很多网站都是,应该是js调用的部分经常出现这种情况,你看看这个http://www.ifxmarketschina.com/ 对话

    #6
  7. 青色亿富豪

    看了,很完整啊,有开头的 li ,也有结束的 /li 啊。 对话

    #7
  8. 亿富豪

    Home
    Resources
    News 对话

    #8
  9. will

    今天看到蓝色上偷米饭发的纯css去虚线挺不错的!

    .wrap{position:relative;}
    .btns{zoom:1;}
    .btns *{outline:0;zoom:1;background:#f2f2f2;}
    .btns button::-moz-focus-inner{border-color:transparent!important;}

    确定取消
    确定取消 对话

    #9
  10. dudo

    这其实是一个画蛇添足的功能,去掉outline给键盘导航使用者带来极大的不便! 对话

    #10
  11. 青色dudo

    键盘导航者?很抱歉,本人很愚昧,能不能详细的解释一下什么是键盘导航者?他到底又是怎么导航的? 对话

    #11
  12. dudo

    请看我的博客~~~《页面的易用性:为什么要去掉链接周围的虚线框? 》 对话

    #12
  13. 青色will

    到“经典论坛”上找到了原帖,确实有效,测试通过 IE6/IE7/FF3/OP10/SA4/CH,但要多增加两个标签。另外,“dudo”的《页面的易用性:为什么要去掉链接周围的虚线框?》写的不错,有兴趣不妨读读。 对话

    #13
  14. 青色dudo

    写的不错,看来这个问题要重视。 对话

    #14
  15. will

    呵呵,谢谢! 对话

    #15
  16. mickey

    elem.blur()是w3c定义的一个离开焦点的事件。这个例子中的this代表的是dom元素不是 jquery对象。 对话

    #16
  17. mickey

    dudo:这其实是一个画蛇添足的功能,去掉outline给键盘导航使用者带来极大的不便!
    现在web UI界面为了一些美观因素 取消outline的情况大有所在 对话

    #17
  18. 卢松松

    不错 收藏了! 对话

    #18
  19. skycaptain

    虽然虚线很小但在干净页面很影响美观 对话

    #19
  20. 青色skycaptain

    其实我的观点是:如果链接跳转了,可以不去掉虚线;
    如果没有跳转,就可以考虑把虚线去掉。 对话

    #20

我要发表意见