js简易日历中设计的知识点：选项卡切换 数组 innerHTML 连接符
与选项卡的区别：div的个数不同
连接符中需要注意的：(优先级)
"abc"+12+3+"def" 结果：abc123def
"abc"+(12+3)+"def" 结果：abc15def
html代码：
<body> <div class="contain"> <ul id="tab" class="clearFix"> <li>1月</li> <li>2月</li> <li>3月</li> <li>4月</li> <li>5月</li> <li>6月</li> <li>7月</li> <li>8月</li> <li>9月</li> <li>10月</li> <li>11月</li> <li>12月</li> </ul> <div id="content"> <h2>1月活动</h2> <p>去滑雪啦，哈哈</p> </div> </div> </body>
css代码：
<link rel="stylesheet" type="text/css" href="css/public.css"/> <style type="text/css"> .contain{width: 240px;margin: 0 auto;margin-top: 100px;} #tab{width: 240px;} #tab li{float: left;width: 40px;height: 60px;line-height:60px;margin: 10px;text-align:center;background: #dbdbdb;cursor: pointer;} #tab li.active{background: #f60;color: #fff;} #content{margin: 10px;width: 200px;min-height: 100px;padding:10px;background: #999;} </style>
js代码：
<script type="text/javascript"> window.onload=function(){ var oTab=document.getElementById("tab"); var aLi=oTab.getElementsByTagName("li"); var oDiv=document.getElementById("content"); var arr=['去滑雪啦，哈哈','222','333','444','555','666','777','888','999','100','101','102']; for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onmouseover=function(){ for(var i=0;i<aLi.length;i++){ aLi[i].className=""; } this.className="active"; oDiv.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>'; } } } </script>
效果如下：
