可以说是前面选项卡的一个延伸或者说是另一个实现方法，选项卡改变的是div，而简易日历改变的是div里的内容
innerHTML
首先先介绍一下innerHTML，是HTML和JS里最有用的东西。
innerHTML是什么？
栗子：
var oDiv = document.getElementById('div1');
oDiv.innerHTML = "...";
oDiv.innerHTML代表什么？
代表div标签中间的内容，就是下面栗子中的 省略号内容。
<div id=div1>
...
</div>
说到这里就出现有意思的地方，既然innerHTML代表的是标签内的内容，那么就可以往里放HTML语句。
比如说上面的栗子：
oDiv.innerHTML = "<h1>标题1</h1>"；
这里就相当于在div中添写了 <h1>标题1</h1> 这条HTML语句，打开审查元素会发现div块中确实添加了这条语句
<div id="div1">
<h1>标题1</h1>
</div>言归正传
简易日历要实现的操作：
当鼠标移动到月份上时，月份的框的样式会改变，且底下的div内的文字会改变
参考前一篇的选项卡会发现基础原理差不多，主要是掌握怎么改变div的内容，这就用到了上面说的innerHTML,还有拼接符“+”
原理就是 现创建一个数组将要改变的内容存进去，再使用this.index读取数组。
详细代码
<script>
window.onload = function () {
const oTab = document.getElementById('tab');
const oLi = oTab.getElementsByTagName('li');
const oText = oTab.getElementsByTagName('div')[0];
const arr = [
"出去玩鸭！",
"不出去玩鸭！",
"上学鸭！",
"学习！",
"考试鸭！",
"放假鸭！",]
for (let i=0; i<oLi.length; i++) {
oLi[i].index = i;
oLi[i].onmouseover = function () {
for (let i=0; i<oLi.length; i++) {
oLi[i].className = '';
}
this.className = 'active';
oText.innerHTML = '<h2>' + (this.index + 1) + '月</h2><p>' + arr[this.index] + '</p>';
};
}
};
</script>
<body>
<div id="tab">
<ul>
<li class="active">
<h1>1</h1>
<p>JAN</p>
</li>
<li>
<h1>2</h1>
<p>FER</p>
</li>
<li>
<h1>3</h1>
<p>MAR</p>
</li>
<li>
<h1>4</h1>
<p>APR</p>
</li>
<li>
<h1>5</h1>
<p>MAY</p>
</li>
<li>
<h1>6</h1>
<p>TUN</p>
</li>
</ul>
<div id="text">
<h2>1月</h2>
<p>出去玩鸭！</p>
</div>
</div>
</body>