网页设计:去掉按钮和链接点击时出现的虚线边框

红薯 发布于 2010/09/16 13:25
阅读 3K+
收藏 4

      网页设计时,考虑到用户体验的问题,我们要适当的对内容的显示效果做一些动作,以增强用户使用体验。这里说的是怎样去掉按钮和链接点击时(获取焦点)出现的虚线边框。

      去掉链接或者按钮的虚线边框,主要使用的代码是onfocus=”this.blur()”,如:

      <a href=”link1.htm” onfocus=”this.blur()”>link1</a>

      <a href=”link1.htm” onfocus=”this.close()”>link1</a>

      <a href=”link1.htm” hidefocus=”true”>link1</a>

      <a href=”link1.htm” hidefocus=”hidefocus”>link1</a>

      利用全局控制来实现

      JS遍历实现

      window.onload=function()
      {
            for(var ii=0; ii<document.links.length; ii++)
            document.links$[$ii$]$.onfocus=function(){this.blur()}
      }

      JS封装为函数

      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();};
      }
      当前是添加一个hidefocus的属性,注释掉的句子是添加onfUCus=this.blur();
      然后调用fHideFocus(”A”),即可把a的虚线框去掉
      通过传递不同的参数,可以去掉更多的虚线框,比如”BUTTON”可以去掉button的
      但要记住参数要用大写字母

      A. map area内链接如何消除链接虚线?

      这是一个观念上的错误,其实应该在所在map的图片上加以控制,而不是在area内,参考传统办法

      B. 关于onFocus

      <a href=“http://www.webkaka.com/“ onFocus=”this.blur()”>
      <Img Src=”http://www.webkaka.com/Example.jpg” Border=0>
      </a>
      onFocus是设置鼠标焦点事件的东西,这个可以用,也可以不用,不过为了让更多的浏览器识别的话,建议采用Border=0 这个才是去除虚线框的关键所在(在网上看到有的人用onFocus=”this.blur()”来消除虚线框,但在本地测试时,仅仅用这一句是不能消除的)

      <script>
      window.onload=function()
      {
      for(var i=0; i<document.links.length; i++)
      document.links[i].onfocus=function(){this.blur()}
      }
      </script>
      加入到头部,可以控制页面全部链接。

加载中
0
ValueError
ValueError

对性能影响大吗?

0
曾建凯
曾建凯

ff,chrome样式设置解决即可:

a, select, input, object/* Flash Item */ { outline: none; }

IE,mootools:

$$('a').addEvent('focus', function(event) { this.blur(); });

0
xu81.com
xu81.com

a{

-moz-outline-style: none; 

HideFocus:true; 

bblr:expression(this.onFocus=this.blur()); 

outline:none;

}

兼容FF,IE

0
返回顶部
顶部