js点击当前链接背景变色其他链接恢复原来背景色
分类:实例代码
可能大家都见过这样的效果,点击一个链接背景会变色,当再点击其他链接的时候,之前被点击的链接背景颜色又会恢复。下面就通过代码实例介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> ul{list-style:none;} li,a{ width:150px; height:30px; text-align:center; line-height:30px; margin-bottom:10px; background-color:#606; color:white; display:block; } a{text-decoration:none;} </style> <script type="text/javascript"> function changeCss(obj,lis){ for(var i=0;i<lis.length;i++){ lis[i].style.backgroundColor = "#606"; } obj.style.backgroundColor="#F30"; } window.onload=function(){ var box=document.getElementById("box"); alinks=box.getElementsByTagName("a"); for(var i=0;i<alinks.length;i++){ alinks[i].onclick=function(){ changeCss(this,alinks) } } } </script> </head> <body> <ul id="box"> <li><a href="#">前端教程网一</a></li> <li><a href="#">前端教程网二</a></li> <li><a href="#">前端教程网三</a></li> <li><a href="#">前端教程网四</a></li> <li><a href="#">前端教程网五</a></li> </ul> </body> </html>
js点击当前链接背景变色其他链接恢复原来背景色,这样的场景在实际项目中还是用的比较多的,关于js点击当前链接背景变色其他链接恢复原来背景色就介绍到这了。
js点击当前链接背景变色其他链接恢复原来背景色属于前端实例代码,有关更多实例代码大家可以查看。