DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul{ overflow: hidden; } ul li{ float: left; border: 1px salmon solid; list-style: none; padding: 5px 20px; background: aqua; } #d1{ display: block; border: 3px salmon solid; height: 100px; width: 380px; text-align: center; } #d2{ display: none; text-align: center; } #d3{ display: none; text-align: center; } </style> <script type="text/javascript"> window.οnlοad=function(){ var dian=document.getElementsByTagName("li"); var divh=document.getElementsByTagName("div"); dian[0].οnclick=function(){ divh[0].style.border="3px salmon solid" divh[0].style.height="100px"; divh[0].style.width="380px"; divh[0].style.display="block"; divh[1].style.display="none"; divh[2].style.display="none"; } dian[1].οnclick=function(){ divh[1].style.border="3px salmon solid"; divh[1].style.height="100px"; divh[1].style.width="380px"; divh[1].style.display="block"; divh[2].style.display="none"; divh[0].style.display="none"; } dian[2].οnclick=function(){ divh[2].style.border="3px salmon solid" divh[2].style.height="100px"; divh[2].style.width="380px"; divh[2].style.display="block"; divh[0].style.display="none"; divh[1].style.display="none"; } } </script> </head> <body> <ul> <li class="zhong">慢</li> <li class="liu">慢</li> <li class="he">来</li> </ul> <div id="d1"> 半山腰的人太挤我们去山顶去看看<br> 我会在那腥臭腐朽的日子里闪耀星辉<br> 我们都各自努力发光别去熄灭别人的灯 </div> <div id="d2"> 唯有前途父母不可辜负<br> 发光不是太阳的权利其实你也可以<br> 只有你跑的快风声才会自然盖过闲言密语 </div> <div id="d3"> 生命只有一次你要活的畅快洒脱<br> 请成为你理想中的大人<br> 一个今天胜过两个明天 </div> </body></html>
HTML+css+js选卡切换
最新推荐文章于 2023-03-25 13:37:59 发布