欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

去掉链接点击时虚线框的几个方法

程序员文章站 2022-03-27 07:50:55
...

    在常规情况下,该虚线框是作为一种提示让用户明确当前关注的东西,然而如果我们把链接的4种状态样式设置比较完整的话,就不是特别需要虚线框的存在,因为它很有可能影响页面的美观。尤其是在做应用系统界面的时候,总给人一种浏览网页的感觉,显得不够专业。

 

    当然,如果全盘否定掉链接虚线框,对使用键盘的用户体验可能又是个大弊端,但这是另外一个话题了。

 

    下面介绍几种去掉链接点击时虚线框的方法:

 

    方法一:利用javascript的onfocus事件,实现如下:

 

   

<a href="#" onfocus="this.blur();">链接</a>

 

    如果引入了jQuery框架则可以利用它的事件绑定机制:

 

$('a').bind('focus', function(){ 
    if(this.blur){ //如果支持 this.blur 
        this.blur(); 
    } 
});

 

    方法二:利用css样式,实现如下:

   

a{
    blr: expression(this.onFocus=this.close());
} /* 只支持IE,过多使用效率低 */
a{
    blr: expression(this.onFocus=this.blur());
} /* 只支持IE,过多使用效率低 */
a:focus { 
    -moz-outline-style: none; 
} /* IE不支持 */
:focus { 
    outline: none; 
} /* for Firefox */ 

 

    方法三:利用标签属性,仅支持IE,实现如下:

 

   

<a href="#" hidefocus="true">链接</a>

 

    方法四:利用Web行为

   

    IE从5.5版本开始支持Web行为的概念。这些行为是由后缀名为.htc的脚本文件描述的,它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX控件)来完成这个功能。Web行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML行为库栏目里提供了几个定制的Web行为:WebService行为。

 

    讲一下代码保存为.htc后缀的文件

 

   

<public:attach event="onfocus" onevent="quit()" /> 
<script language="javascript"> 
    function quit(){ 
        this.blur(); 
    } 
</script>

 

    然后,在需要去除超链虚框的页面的<head>和</head>之间加入:

 

   

<style type="text/css"> 
    a {behavior:url("htc文件")} 
</style>

    

    如果页面已经有了style标签,只需要将 a {behavior:url("htc文件")} 一句插入里面即可。