//今天最头疼的地方在于 getElementsByClassName()的 [] ~~
//错了N遍后只能说有点点头绪，如果不加[] 查找的就是全部吧 加上[]能精确控制的标签或者class
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>简易年历</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
p,li,span{ font-family:"Microsoft YaHei"; font-size:12px; color:#FFF;}
#tab { 200px; height:340px; background:#dddddd; margin:50px auto; padding:10px; }
ul{ 190px; height:250px; margin:0 auto; }
li{ list-style:none; 50px; height:50px; float:left;
text-align:center; font-variant:50px; background:#000; border:1px solid #000;
margin:10px 0 0 10px; }
.text {
176px; height:80px; border:1px solid #eeeeee; margin:7px 13px 5px 13px; background:#FFF;
text-indent:24px;
}
.text p{ color:#000; margin:2px 7px;}
.text h4{ margin:3px auto; padding-left:7px;}
.active{ background:#FFF; color:#F00;}
.active p{ background:#FFF;color:#F00;}
#tab ul li h2{ margin-top:5px;}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FEB</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APP</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text">
<h4>简易日历</h4><p>由fridolph制作。把鼠标移到相应的月份上，会显示该月份上的信息哦</p>
</div>
</div>
<script src="js/rili.js"></script>
</body>
</html>
--------------------------------------------以下是javascript代码--------------------------------------------
window.onload = function() {
var mouth_title =[ //该声明是最后给innerHTML标题的
'大挑战', //一月 标题
'过年咯', //二月 标题
'开学啦', //三月 标题
'奋斗中', //四月 标题
'好累啊', //五月 标题
'毕业季', //六月 标题
'找工作ing', //七月 标题
'找租房ing', //八月 标题
'新工作', //九月 标题
'奋斗ing', //十月 标题
'生日咯', //十一月标题
'快结束了', //十二月标题
];
var mouth_text =[ //该声明是最后给innerHTML的文字的
'又是新的一年了。挺辛苦的，记得多加衣服', //一月份的文字
'二月了，别让自己太累了哦，回家一起过年吧', //二月份的文字
'要开学了哦。学得怎么样了，温故而知新，别遗漏太多', //三月份的文字
'长路漫漫，每天保持一个好状态，继续学更多的知识吧', //四月份的文字
'毕业论文要在这个月内搞定了，不能拖啊，好好弄', //五月份的文字
'这月一过大学生活就真正宣告结束了，学得怎样了？', //六月份的文字
'开始去找工作吧，利用好现有这些知识和技能，相信自己', //七月份的文字
'得去成都找房子租下来呢，以后就是打拼的日子了', //八月份的文字
'工作应该开始了吧，再累再苦都坚持下来，以后就好好', //九月份的文字
'十月了，国庆节！可自己不能轻松下来啊，好好巩固自己吧', //十月份的文字
'我的生日就要到了，双十一控制住自己的手啊，一不小心就完了', //十一月份文字
'今年也要结束了，无论怎样，坚持做最好的自己吧！^_^', //一二月份文字
];
var oTab = document.getElementById('tab'); //获取文件中ID为tab的元素
var oLi = oTab.getElementsByTagName('li'); //在oTab中找到标签li命名为oLi
var oTxt = oTab.getElementsByClassName('text')[0]; //最容易犯错的地方，获取的是class（标签）这是多个对象中的一个 所以要用[]
for(var i=0; i<oLi.length; i++){
oLi[i].xuhao = i; //让循环后对应数字的序号为i （从0开始的）
oLi[i].onmouseover = function() { //添加一个鼠标移入事件
for(var i=0; i<oLi.length; i++){
oLi[i].className = ''; //执行移入后循环让所有li标签的类名清空
}
this.className = 'active'; //让当前鼠标移动到的类名为active
oTxt.innerHTML = "<h4>"+(this.xuhao+1)+"月 "+mouth_title[this.xuhao]+"</h4><p>"+mouth_text[this.xuhao]+"</p>";
} //实现 innerHTML
}
}
/* = = 感觉越来越跟不上节奏了…… 一个小地方错N多遍还是改不过来，各种苦逼~~ 果然还是基本功不够扎实， 空下来了还是得多补补基本功
最后实现的效果还算差强人意~~ 加油啊，不要放弃。遇到困难是难免的，慢慢寻找解决的办法吧，javascript…… 还是得慢慢来 */