首页 > 代码库 > 日历选项卡
日历选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日历</title> <style type="text/css"> *{margin:0;padding:0;} #contain{max-width:350px;border: 2px solid red;margin:0 auto;} ul{padding-bottom:10px;} ul,li{list-style-type: none;} ul li{width: 100px;height: 100px;text-align: center;line-height: 100px;color:#fff;float: left;border:1px solid red;background: #6F6363;margin-left:10px;margin-top:10px;display:block;} ul:after{content:"";display:block;height:0;clear:both;} .active{background: #ccc;} .text{min-height:100px;border:2px solid red;margin:0 auto;} </style> <script type="text/javascript"> var aDaras=[//数组用来存放数据 ‘快过年了,去哪玩啊。‘, ‘第二个月了,假期好短‘, ‘第三个月。。。‘, ‘第四个月。。。‘, ‘第五个月。。。‘, ‘第六个月。。。‘, ‘第七个月。。。‘, ‘第八个月。。。‘, ‘第九个月。。。‘, ‘第十个月。。。‘, ‘第十一个月。。。‘, ‘第十二个月。。。‘, ]; window.onload=function(){ var aLi=document.getElementsByTagName(‘li‘); var oTxt=document.getElementById(‘contain‘).getElementsByTagName(‘div‘)[0]; var i=0; for(i=0;i<aLi.length;i++){ aLi[i].index=i;//给i加上一个索引值 aLi[i].onmouseover=function(){ for(i=0;i<aLi.length;i++){ aLi[i].className=‘‘; } this.className=‘active‘; oTxt.innerHTML=‘<h2>‘+(this.index+1)+‘月活动</h2><p>‘+aDaras[this.index]+‘</p>‘;//在div中加入内容 } } } </script> </head> <body> <div id="contain"> <ul> <li class="active"><h2>1</h2></li> <li><h2>2</h2></li> <li><h2>3</h2></li> <li><h2>4</h2></li> <li><h2>5</h2></li> <li><h2>6</h2></li> <li><h2>7</h2></li> <li><h2>8</h2></li> <li><h2>9</h2></li> <li><h2>10</h2></li> <li><h2>11</h2></li> <li><h2>12</h2></li> </ul> <div class="text"> <h2>1月活动</h2> <p>快过年了,去哪玩啊。</p> </div> </div> </body> </html>
查看范例
日历选项卡
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。