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-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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值