解決點擊鏈接時網頁出現虛線框方法

在IE下,需要在標籤 a 的結構中加入 hidefocus="true" 屬性。即:

<a href="http://www.yanzhaoit.com" hidefocus="true" title="做有用網站,找燕趙互聯">燕趙互聯</a>

input{blr:expression(this.hideFocus=this.blur()); }  
a:visited {blr:expression(this.hideFocus=this.blur());}

而在FF等瀏覽器中則相對比較容易,直接給標籤 a 定義樣式 outline:none; 就可以了,即:

a {
outline:none;
}

方法二:

        也可以僅用 CSS 來控制,即對 IE 的情形使用 expression 表達式,但不推薦使用,畢竟 expression 在性能上有問題。

.HideFocus {
hide-focus: expression(this.hideFocus=true); /* for ie 5+ */
outline: none; /* for firefox 1.5 + */
}

 

 

2.批量消除虛線框

如果你的網頁上有幾個甚至上百個鏈接,而你又想要去掉上面那些討厭的虛線框,難道你還一個個去Ctrl+C、Ctrl+V,天哪!這對一個正常人來 說絕對是個惡夢。也許你會說,用DW或其它文本編輯器裏的“查找/替換”功能就能解決,對!不可否認,這是一個好辦法,但作爲一個優秀的web developer,用儘可能少的代碼實現一樣的功能纔是我們應當追求的目標,下面我們就用htc來解決這問題。至於htc是什麼,全稱就是Html Components,由微軟在IE5.0後開始提供的一種新的指令組合,它可以把某種特定功能的代碼封裝在一個組件之中,從而實現了代碼的重複使用。作 爲一個組件,htc裏包含了屬性、方法、事件等等各種知識,在這裏就不一一介紹了,具體內容各位可以參考微軟的msdn主頁。

回到開始處,Onfocus=this.blur()在這裏很顯然,onfocus是一個事件,this.blur()則是被事件所觸發的對象,既然這點明確了,代碼就知道該怎麼寫了。

摺疊展開JavaScript Code複製內容到剪貼板
  1. <public:attach event=”onfocus” onevent=”example()” />   
  2. <script language=”javascript”>   
  3. function example(){   
  4. this.blur();   
  5. }   
  6. </script>  

將以上代碼存爲.htc爲擴展名的文件,然後html網頁的<head>。。。</head>之間加入下面的CSS代碼

摺疊展開CSS Code複製內容到剪貼板
  1. <style type="text/css">   
  2. <!--   
  3. a {behavior:url(htc文件所在路徑地址)}   
  4. -->   
  5. </style>  
保存,預覽,怎麼樣?效果出來了吧,再看看代碼,的確精簡了不少,而且在鏈接越多時體現得越發明顯。

在網頁設計時都會碰到一些問題,就是input點擊時會出現虛線框哦,那我們有的朋友不喜歡所以就選擇一個可以去除的辦法了。

<style type="text/css">
<!--
.login_button {
background-image: url(/images/login_button.jpg);
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 0px;
height: 46px;
width: 48px;
border: none;
background-color: #FFCC00;
}
-->
</style>
</head>
<body>
<input type="submit" class="login_button" tabindex="4" value=" 確定" width="48px" height="46px" border="0px" />
</body>

解決方法:

,< input > 內加 onFocus="this.blur()"就行了

那麼下面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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章