日历选项卡
Posted Mr_W
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了日历选项卡相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于日历选项卡的主要内容，如果未能解决你的问题，请参考以下文章