首页 > CSS, JavaScript > (CSS专题)链接美化之去掉虚线框

(CSS专题)链接美化之去掉虚线框

忙碌的一天就这么过了,但睡觉前还是要把北瓜Update一下的,另外,今晚收到一个喜讯,至于喜讯的内容嘛,这里就不公布啦!Ok,进入正题。

如果你自己做过网页,那么我想你一定知道当点击一个超链接的时候会出现一个矩形虚线框,个人觉得那样看着心里挺别扭的,也有些影响美观,以下就总结一下去掉虚线框的几种方法:

方法一:利用javascript的onfocus事件:

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

假如你的页面引入了jQuery框架(PS:我最喜欢的js框架)则可以利用它的事件绑定机制:

$('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文件”)} 一句插入里面即可。

分类: CSS, JavaScript 标签: , , , ,
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。