JS 實現(xiàn)點擊a標(biāo)簽的時候讓其背景更換

更新時間：2013年10月15日 16:38:56 作者：

點擊a標(biāo)簽的時候給其換背景的方法有很多，在本文將為大家介紹下js是如何實現(xiàn)的，感興趣的朋友不要錯過

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type=text/javascript src="alabel.js"></script> 
<style type="text/css"> 
.curr{background:blue;display:inline;} 
</style> 

</head> 
<body> 
<div class="clMenu"> 
<span><a href="#">1</a></span> 
</div> 

</body> 
</html> 

在alabel.js中：

復(fù)制代碼代碼如下:

 
window.onload = function () 
{ 
var aspan = document.getElementsByTagName("span"); 
var i = 0; 
for (i = 0; i < aspan.length; i++) 
{ 
aspan[i].onclick = function () 
{ 
for (i = 0; i < aspan.length; i++) aspan[i].className = ""; 
this.className = "curr"; 
}; 
} 
}; 

這樣就可以實現(xiàn)在點擊a標(biāo)簽的時候給其添加紅色的背景。

注意：curr的屬性中display不能是block，否則添加的背景是一整行。

您可能感興趣的文章:

相關(guān)文章

javascript跑馬燈抽獎實例講解
這篇文章主要為大家介紹了javascript跑馬燈抽獎特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-01-01
li隔行換色效果代碼升級版
增加了對同一ID內(nèi)的多個子容器中的tag(標(biāo)簽)分別做隔行處理。div+css布局下，也可以控制了
2008-05-05
js實現(xiàn)省市區(qū)三級聯(lián)動非select下拉框版
這篇文章主要為大家詳細介紹了js實現(xiàn)省市區(qū)三級聯(lián)動非select下拉框版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
JS實現(xiàn)動態(tài)移動層及拖動浮層關(guān)閉的方法
這篇文章主要介紹了JS實現(xiàn)動態(tài)移動層及拖動浮層關(guān)閉的方法,可實現(xiàn)動態(tài)拖動浮動窗口及關(guān)閉窗口的功能,非常具有實用價值,需要的朋友可以參考下
2015-04-04
再談javascript常見錯誤及解決方法
下面小編就為大家?guī)硪黄僬刯avascript常見錯誤及解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
js中indexOf()的簡單使用示例
indexOf在js中有著重要的作用,可以判斷一個元素是否在數(shù)組中存在,或者判斷一個字符是否在字符串中存在,下面這篇文章主要給大家介紹了關(guān)于js中indexOf()簡單使用的相關(guān)資料,需要的朋友可以參考下
2023-01-01
TypeScript中l(wèi)et和var的區(qū)別介紹
這篇文章主要介紹了TypeScript?let與var的區(qū)別,主要從作用域等這幾個方面做詳細介紹，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-07-07
JS生態(tài)系統(tǒng)加速模塊解析賦能性能優(yōu)化探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速模塊解析賦能性能優(yōu)化探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2024-01-01
JavaScript JSON.stringify()的使用總結(jié)
JSON是一種輕量級數(shù)據(jù)格式，可以方便地表示復(fù)雜數(shù)據(jù)結(jié)構(gòu)。JSON對象有兩個方法：stringify()和parse()。在簡單的情況下，這兩個方法分別可以將JavaScript序列化為JSON字符串，以及將JSON解析為原生JavaScript值。本文著重介紹JSON.stringify()的使用方法和注意事項。
2021-05-05
微信小程序?qū)Ш綑诨瑒佣ㄎ还δ苁纠?實現(xiàn)CSS3的positionsticky效果)
這篇文章主要介紹了微信小程序?qū)Ш綑诨瑒佣ㄎ还δ?可實現(xiàn)CSS3的positionsticky效果,涉及微信小程序事件監(jiān)聽、狀態(tài)判斷及屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2019-01-01