點選切換內容【2018.11.24】
阿新 • • 發佈：2018-11-29
<html> <head> <title>點選切換</title> <style type="text/css"> *{margin:0px;padding:0px;} #head{height:56px;} span{ float:left; margin:20px 10px 0px 10px; padding:10px; font-weight:bold; font-size:14px; color:white; } .nr { height:400px; width:350px; display:none; } #nr1 { display:block; } </style> <script type="text/javascript"> function changes(c1) { alert("heillo"); var a = document.getElementById("neirong"); var b = document.getElementById(c1); var as = a.getElementsByTagName("div"); alert("heillo"); for(var i=0;i<as.length;i++) { as[i].style.display="none"; } b.style.display="block"; } </script> </head> <body> <div id="head"> <span style="background-color:#C0F;" onclick="changes('nr1')">點選紫色</span> <span style="background-color:#09C;" onclick="changes('nr2')">點選藍色</span> <span style="background-color:#666;" onclick="changes('nr3')">點選灰色</span> </div> <div id="neirong"> <div class="nr" id="nr1" style="background-color:#C0F"></div> <div class="nr" id="nr2" style="background-color:#09C"></div> <div class="nr" id="nr3" style="background-color:#666"></div> </div> <div>會不會影響我</div> </body> </html>