nav-left cat-right
cat-right

4种方法消除超链接点击虚线框

在网页中凡是添加了超级链接的对象,不管是文字还是图片,在点击的时候都会出现一个虚线框,有时候会觉得很影响页面的美观,也许你也和502一样有这样的困扰,也许你的boss也是个完美主义者,那么下面502将会整理从google搜来的4种解决方案来想消除这不太受欢迎的虚线框。

非IE浏览器里一般用 a:focus { outline:0; }这句来搞定

1、首先有利用htc来解决的。htc是什么呢?htc全称就是Html Components,由微软在IE5.0后开始提供的一种新的指令组合,它可以把某种特定功能的代码封装在一个组件之中,从而实现了代码的重复使用。作为一个组件,htc里包含了属性、方法、事件等等各种知识,在这里就不一一介绍了,具体内容各位可以参考微软的msdn主页。现在言归正传,看看htc是怎么批量消除链接虚线框的:
①首先将下面的代码保存为.htc扩展名的文件;

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

②然后在网页文件的<style>标签内或着外链的CSS文件里添加如下一行代码即可:

a {behavior:url(htc文件所在路径地址)}

2、使用CSS中Expression来解决。跟第一个方法相比,此方法要简单得多,不需要创建htc文件,只需在网页文件的<style>标签内或着外链的CSS文件里添加如下一行代码即可:

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

3、使用JS脚本来解决。代码如下,复制到网页文件的<head>标签内即可。

<script type="text/javascript">window.onload=function()
{
 for(var ii=0; ii<document.links.length; ii++)
 document.links$[$ii$]$.onfocus=function(){this.blur()}
}</script>

4、同样是使用JS脚本的方法。代码如下,复制到网页文件的<head>标签内即可。

<script type="text/javascript">function fHideFocus(tName){
aTag=document.getElementsByTagName(tName);
for(i=0;i<aTag.length;i++)aTag$[$i$]$.hideFocus=true;
for(i=0;i<aTag.length;i++)aTag$[$i$]$.onfocus=function(){this.blur();};
}</script>

没有评论

还没有评论呢。

这篇文章上的评论的 RSS feed

抱歉,评论已关闭。