<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ padding:0; margin:0;} #div1{ width:910px; border:1px solid #000; overflow:hidden; height:200px; padding:20px 0; position:relative} #div1 .active{ background:#FF0; border:1px solid #000; } #div1 div{ border:1px solid #F00; width:200px; height:200px; float:left; margin:0 10px; } #div1 .list{ position:absolute; top:0; margin-left:0;} #div1 .list1{ position:absolute; top:20px; left:20px;} #div1 .list2{ position:absolute; top:20px; left:240px;} #div1 .list3{ position:absolute; top:20px;left:460px;} #div1 .list4{ position:absolute; top:20px; left:680px;} </style> <script> window.onload=function(){ var oDiv1=document.getElementById(‘div1‘); var oBtn=oDiv1.getElementsByTagName(‘div‘); for(var i=0; i<oBtn.length; i++){ oBtn[i].onmouseover=function(){ for(var i=0; i<oBtn.length;i++){ var classVal = oBtn[i].getAttribute("class"); classVal = " " + classVal + " "; classVal = classVal .replace(" active ",""); oBtn[i].setAttribute("class",classVal ); } var classVal = this.getAttribute("class"); classVal = " " + classVal + " "; classVal = classVal.concat(" active"); this.setAttribute("class",classVal );s } }; } </script> </head> <body> <div id="div1"> <div class="list list1"></div> <div class="list list2"></div> <div class="list list3"></div> <div class="list list4"></div> </div> </body> </html>
以上代码就可以
借此机会,介绍一下replace和concat的用法
replace定义和用法
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
stringObject.replace(regexp/substr,replacement)
http://www.w3school.com.cn/jsref/jsref_replace.asp
concat定义和用法
concat() 方法用于连接两个或多个数组。
<html> <body> <script type="text/javascript"> var a = [1,2,3]; document.write(a.concat(4,5)); </script> </body> </html>
结果是1,2,3,4,5
时间: 2024-11-06 15:02:47