选卡切换 HTML+css+js

最新推荐文章于 2023-03-25 13:37:59 发布

疏影.900

最新推荐文章于 2023-03-25 13:37:59 发布

阅读量75

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_65991332/article/details/123713068

版权

<!DOCTYPE html>

<html>

<head>

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>

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>

半山腰的人太挤我们去山顶去看看<br>

我会在那腥臭腐朽的日子里闪耀星辉<br>

我们都各自努力发光别去熄灭别人的灯

</div>

唯有前途父母不可辜负<br>

发光不是太阳的权利其实你也可以<br>

只有你跑的快风声才会自然盖过闲言密语

</div>

<div id="d3">
           生命只有一次你要活的畅快洒脱<br>
           请成为你理想中的大人<br>
           一个今天胜过两个明天
       </div>
   </body>
</html>

疏影.900

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
选卡切换 HTML+css+js

<!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-st...
复制链接

扫一扫