消除网页超链接“虚线框”的两种办法

2009-12-22 17:02:32 作者：网友来源：互联网

我们在网页上创建的超链接，在点击时会产生一个虚线框，如果是文字链接也许对版面影响不大，但如果是图片链接时却会对版面造成一定影响，下面就介绍两种去除虚线框的方法：
1.单个消除虚线框，在链接属性加上onfocus="this.blur()"，例如

<a href="http://www.5icool.org"  onfocus="this.blur()">酷站代码</a>

这时可恶的虚线框是不是消失了^_^

2.批量消除虚线框

如果你的网页上有几个甚至上百个链接，而你又想要去掉上面那些讨厌的虚线框，难道你还一个个去Ctrl+C、Ctrl+V，天哪！这对一个正常人来说绝对是个恶梦。也许你会说，用DW或其它文本编辑器里的“查找/替换”功能就能解决，对！不可否认，这是一个好办法，但作为一个优秀的web developer，用尽可能少的代码实现一样的功能才是我们应当追求的目标，下面我们就用htc来解决这问题。至于htc是什么，全称就是Html Components，由微软在IE5.0后开始提供的一种新的指令组合，它可以把某种特定功能的代码封装在一个组件之中，从而实现了代码的重复使用。作为一个组件，htc里包含了属性、方法、事件等等各种知识，在这里就不一一介绍了，具体内容各位可以参考微软的msdn主页。

回到开始处，Onfocus=this.blur()在这里很显然，onfocus是一个事件，this.blur()则是被事件所触发的对象，既然这点明确了，代码就知道该怎么写了。

折叠JavaScript Code复制内容到剪贴板

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

将以上代码存为.htc为扩展名的文件，然后html网页的<head>。。。</head>之间加入下面的CSS代码

折叠CSS Code复制内容到剪贴板

<style type="text/css">
<!--
a {behavior:url(htc文件所在路径地址)}
-->
</style>

保存，预览，怎么样？效果出来了吧，再看看代码，的确精简了不少，而且在链接越多时体现得越发明显。

相关热词：超链接 HTC 虚线框

分享到：

更多...

收藏至我的帐号

教程排行榜: 20款华丽酷炫的jQuery图片相册插件; 新手教程：10个jQuery特效讲解; 分享10款精美的焦点幻灯和图片特效jQuery插件; 如何处理JS的'null'为空或不是对象; 多款提高网页表格(table)操作易用性的jQuery插件; 20款超酷的基于jQuery的幻灯和表单插件(附...; 打造完美的jQuery网页进度条（LOADING）; 如何把在线地图Google Maps API整合到网站中去？; jQuery 1.4.1 中文帮助文档速查表（附CHM文件下载）; 最新的jQuery 1.4官方文档中文翻译版; 零起步学习如何写jQuery框架; jQuery的鼠标事件实例教程; 基于JQuery的上传插件Uploadify使用方法详解; 多个增强Web设计界面的Javascript脚本代码; 九款常用的JS代码高亮工具; lazyload：基于jQuery框架实现图片异步加载

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 能沿多个方向滑动切换的jquery幻灯代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...