巧用hideFocus改善超链接的用户体验
用户体验是个大话题,本文分享一下超链接中的hideFocus的用法,来小提升一下效果!
也许你还不知道它有什么作用,简单说一下,hideFocus就是在点击超链接时,对是否显示外虚线框的设定!
hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.blur()" 也可写作 hidefocus="true",也可省略赋值直接写hideFocus。
如果超链接没有添加hideFocus,鼠标点击该超链接,则外面出现一个虚线框,即为聚焦,而使用了hideFocus则不会有虚线框。在IE下,需要在标签 A 的结构中加入 hidefocus="true" 属性即可!看下面演示你就知道了!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head><title> 巧用hidefocus改善超链接的用户体验 by nuodou.com </title></head> <body> <a href="#" hidefocus="true" title="">点此没有虚线框</a> <br><br> <a href="#" title="">点此可见有虚线框</a> </body> </html>
而在FF等浏览器中则相对比较容易,直接给标签 a 定义样式 outline:none; 就可以了,即:
A {outline:none;} 或者 A {blr:expression(this.onFocus=this.blur());outline:none;} //支持IE
ps.也许你觉得不显示虚线框会降低用户体验,那你还是无视本文吧哈哈!