<!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 type="text/css"> *{ margin:0px auto;} #kuang{ 100px; height:50px;} .list{ 100px; height:50px; background-color:#03C; text-align:center; vertical-align:middle; line-height:50px; color:#fff; border:1px solid #CCC} </style> </head> <body> <div id="kuang"> <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">深圳</div> <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">北京</div> <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">上海</div> </div> <!-- <div id="l" style="100%; height:200px; background-color:red;"></div> <div id="caidan" style="100%; height:100px; background-color:blue;"></div> <div style="100%; height:1000px; background-color:#000;"></div> <input type="button" value="an" onclick="Hui()" />--> </body> <script type="text/javascript"> function Xuan(a) { var list = document.getElementsByClassName("list"); //清一下(回复原样式) for(var i=0;i<list.length;i++) { list[i].style.backgroundColor = "#03C"; list[i].removeAttribute("as"); } //选择变色 a.style.backgroundColor = "red"; a.setAttribute("as",1); } function Bian(a) { var list = document.getElementsByClassName("list"); //清一下(回复原样式) for(var i=0;i<list.length;i++) { if(list[i].getAttribute("as")!=1) { list[i].style.backgroundColor = "#03C"; } } //选择变色 a.style.backgroundColor = "red"; } function Hui() { var list = document.getElementsByClassName("list"); //清一下(回复原样式) for(var i=0;i<list.length;i++) { if(list[i].getAttribute("as")!=1) { list[i].style.backgroundColor = "#03C"; } } } /*function Hui() { window.scrollTo(0,200); }*/ /*window.onscroll = function() { var c = document.getElementById("caidan"); //var ch = c.style.height; var l = document.getElementById("l"); var lh = l.style.height; //parseInt(ch); if(window.scrollY >= parseInt(lh)) { //超出的范围操作 c.style.position = "fixed"; c.style.top = "0px"; } else { //没有超出的范围操作 c.style.position = "relative"; }*/ } </script> </html>
这是这个例题的最终效果，鼠标移上可以变色，移开在变回来，点击可以选中而且变色。
| <!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 type="text/css"> | |
| *{ | |
| margin:0px auto;} | |
| #kuang{ | |
| 100px; | |
| height:50px;} | |
| .list{ | |
| 100px; | |
| height:50px; | |
| background-color:#03C; | |
| text-align:center; | |
| vertical-align:middle; | |
| line-height:50px; | |
| color:#fff; | |
| border:1px solid #CCC} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="kuang"> | |
| <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">深圳</div> | |
| <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">北京</div> | |
| <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">上海</div> | |
| </div> | |
| <!-- <div id="l" style="100%; height:200px; background-color:red;"></div> | |
| <div id="caidan" style="100%; height:100px; background-color:blue;"></div> | |
| <div style="100%; height:1000px; background-color:#000;"></div> | |
| <input type="button" value="an" onclick="Hui()" />--> | |
| </body> | |
| <script type="text/javascript"> | |
| function Xuan(a) | |
| { | |
| var list = document.getElementsByClassName("list"); | |
| //清一下(回复原样式) | |
| for(var i=0;i<list.length;i++) | |
| { | |
| list[i].style.backgroundColor = "#03C"; | |
| list[i].removeAttribute("as"); | |
| } | |
| //选择变色 | |
| a.style.backgroundColor = "red"; | |
| a.setAttribute("as",1); | |
| } | |
| function Bian(a) | |
| { | |
| var list = document.getElementsByClassName("list"); | |
| //清一下(回复原样式) | |
| for(var i=0;i<list.length;i++) | |
| { | |
| if(list[i].getAttribute("as")!=1) | |
| { | |
| list[i].style.backgroundColor = "#03C"; | |
| } | |
| } | |
| //选择变色 | |
| a.style.backgroundColor = "red"; | |
| } | |
| function Hui() | |
| { | |
| var list = document.getElementsByClassName("list"); | |
| //清一下(回复原样式) | |
| for(var i=0;i<list.length;i++) | |
| { | |
| if(list[i].getAttribute("as")!=1) | |
| { | |
| list[i].style.backgroundColor = "#03C"; | |
| } | |
| } | |
| } | |
| /*function Hui() | |
| { | |
| window.scrollTo(0,200); | |
| }*/ | |
| /*window.onscroll = function() | |
| { | |
| var c = document.getElementById("caidan"); | |
| //var ch = c.style.height; | |
| var l = document.getElementById("l"); | |
| var lh = l.style.height; | |
| //parseInt(ch); | |
| if(window.scrollY >= parseInt(lh)) | |
| { | |
| //超出的范围操作 | |
| c.style.position = "fixed"; | |
| c.style.top = "0px"; | |
| } | |
| else | |
| { | |
| //没有超出的范围操作 | |
| c.style.position = "relative"; | |
| }*/ | |
| } | |
| </script> | |
| </html> |