如何去除链接的虚线框？

最新推荐文章于 2024-10-18 11:12:30 发布

桂林哈秋

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量1.4k

点赞数

分类专栏：网页设计文章标签： htc components html javascript behavior function

网页设计专栏收录该内容

81 篇文章 0 订阅

订阅专栏

原文：http://www.jenfy.cn/article/htmldata/detail/2007/10/8/532.html

1　　当我们点击超链接的时候，周围就会出现难看的虚线框，这大大影响了网页的整体美。其实虚线框表示超链获得了焦点，要去掉它也很简单，只要在超链标签中加上一句onFocus="if(this.blur)this.blur()"就可以了。如下：

　　再点一下链接看看如何^_^。

2　大家有没有这样的烦恼，精心切割制作的图形，因为含有链接，点击之后就会出现一个虚线框，非常难看，欲除之而后快！

　　你也许知道，οnfοcus="this.blur()"这条代码能消除链接时的虚线框，但你有没有想过，如果你的网页上有几个甚至上百个链接，难道你还一个个去复制粘贴？其实，只要我们使用HTC，就可以轻松解决问题。至于HTC是什么，全称就是HTML Components，由微软在IE5.0后开始提供的一种新的指令组合，它可以把某种特定功能的代码封装在一个组件之中，从而实现了代码的重复使用。作为一个组件，HTC里包含了属性、方法、事件等等各种知识，在这里就不一一介绍了，具体内容各位可以参考微软主页的MSDN主页。

　　回到开始处，我们分析一下οnfοcus=this.blur()，onfocus是一个事件，this.blur()则是被事件所触发的对象，既然这点明确了，代码就知道该怎么写了。

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

//将以上代码存为以.htc为扩展名的文件，然后再编写一个普通的html网页。

<html>
<head>
<style>
a {behavior:url(HTC文件所在的路径地址)}
</style>
<body>
<a href=" #"> 链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
//点击链接试试，没有虚线框了吧。
</body>
</html>

　　OK，保存并预览，怎么样？效果出来了吧，并且代码如此简洁！最后我要说的是，这还仅仅是HTC应用上的冰山一角而已，更多的功能还需要我们去学习，以帮助我们设计出更好的页面！