如何批量消除網頁串連上的“虛線框”

來源:互聯網
上載者:User
網頁

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

  回到開始處,Onfocus=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應用上的冰山一角而已,更多的功能還需要你們去認識,相信有點JS與CSS基礎的你一定能學有所成。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。