月历选项卡

最新推荐文章于 2020-04-01 00:50:16 发布

赖乾华

最新推荐文章于 2020-04-01 00:50:16 发布

阅读量243

点赞数 1

分类专栏：零基础javascript web前端

本文链接：https://blog.csdn.net/qq_37252367/article/details/54141786

版权

web前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

零基础javascript

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 *{
 margin: 0 auto;
 padding: 0;
 list-style: none;
 }
 .logo{
 width: 220px;
 height: 335px;
 background: #EAE9E9;
 }
 .box li{
 width: 50px;
 height: 50px;
 background: #424242;
 color: white;
 float: left;
 margin: 10px 0 0 10px;
 text-align: center;
 line-height: 30px;
 }
 .box{
 width: 200px;
 height: 250px;
 margin-left: 15px;
 }
 .box span{
 display: block;
 margin-top: -12px;
 width: 50px;
 height: 30px;
 }
 .box .btn{
 color: #E84A7E;
 background: white;
 }
 .dox{
 width: 170px;
 height: 70px;
 background: #F1F1F1;
 border: 1px solid white;
 }
 .dox p{
 color: #555555;
 margin: 10px 0 0 10px;
 display: none;
 }
 .dox span{
 display: block;
 font-size: 13px;
 margin-top: 10px;
 }
 .logo .bl{
 color: #E84A7E;
 background: white;
 }
 </style>
 <script type="text/javascript">
 window.οnlοad=function(){
 var oBox=document.getElementById('ac');
 var oLi=oBox.getElementsByTagName('li');
 var oDox=document.getElementById('up');
 var oBtn=oDox.getElementsByTagName('p');

 for(var i=0;i<oLi.length;i++){
 oLi[i].index=i;
 oLi[i].οnmοuseοver=function(){
 for(var i=0;i<oLi.length;i++){
 oLi[i].className='';
 oBtn[i].style.display='none';
 }
 this.className='bl';
 oBtn[this.index].style.display='block';
 }
 }
 }
 </script>
 </head>
 <body>
 <div class="logo">
 <ul class="box" id="ac">
 <li class="btn">1 JAN</li>
 <li>2 FER</li>
 <li>3 MAR</li>
 <li>4 APR</li>
 <li>5 MAY</li>
 <li>6 JUN</li>
 <li>7 JUL</li>
 <li>8 AUR</li>
 <li>9 SUP</li>
 <li>10 OCT</li>
 <li>11 NOV</li>
 <li>12 DEC</li>
 </ul>
 <div class="dox" id="up">
 1月活动
 你们毕业啦，准备工作咯
 
 2月活动
 你们毕业啦，准备工作咯
 
 3月活动
 你们毕业啦，准备工作咯
 
 4月活动
 你们毕业啦，准备工作咯
 
 5月活动
 你们毕业啦，准备工作咯
 
 6月活动
 你们毕业啦，准备工作咯
 
 7月活动
 你们毕业啦，准备工作咯
 
 8月活动
 你们毕业啦，准备工作咯
 
 9月活动
 你们毕业啦，准备工作咯
 
 10月活动
 你们毕业啦，准备工作咯
 
 11月活动
 你们毕业啦，准备工作咯
 
 12月活动
 你们毕业啦，准备工作咯
 
 </div>
 </div>
 </body>
</html>