实现的主要功能：
- 点击实现日历样式的改变
- 实现下一次点击时，上一次点击改变的样式恢复原状（核心）
- 实现点击日历时，在最下方输出信息指定信息（注意：并不是点击元素中的信息）
第一步的核心思想：
由于此处增加点击事件不是通过 id名 直接添加，而是通过类数组（通过DOM中的TagName得到），给需要相同功能的标签，利用循环进行点击事件添加。
即如果是通过id名添加点击事件：
id.onclick = function(){
id.style = "color:black" //通过id这个钩子，可以直接取到通过点击事件要所想要修改的DOM
}这就造成了一个现象，即当鼠标点击后，无法直接通过id名（下面称为钩子），即钩子获取鼠标点击
了哪个日历块， 因为随着循环进行，其索引值不断改变，当循环结束，（点击时已经在循环结束后了）如何索引该日历块成了主要问题。
这里利用了 this 指向，（第一次感受到了this的威力），即其事先不用通过 钩子 得到要修改的元素，
而是，通过绑定的点击事件， 与可指向其调用对象的 this 获取到被点击日历块的 钩子。
第二步的核心思想：
这种思维方式，充分利用了JS脚本语言的特性，发挥了其在，修改DOM中的强大威力。
即通过给日历块加入 类名
并且，可以通过 清除 该DOM class名 ， setAttribute(“class”,"")，实现样式的回归！ 简直不要太给力！
但是，在运用时需要注意，其在css中的优先级，使用@important 可实现优先级最高！
核心代码
body .active{
background: #fff;
color: red;
}在在css中建立好点击后的样式，通过类名与点击事件相交互
<script type="text/javascript">
var liArr = document.getElementsByTagName("li");
var text = document.getElementById("text_1");
var data = ["11","22","33","44","55","66","77","88","99","1010","1111","1212"];
for(var i = 0;i< liArr.length ;i++){
liArr[i].onmousemove = function(){
this.style.border = "1px solid #ccc"
//var child = this.children;
//console.log(child);
}
liArr[i].onmouseout = function(){
this.style.border = "none"
//this.style.background = "rgba(51,51,51)"
}
liArr[i].index = i; // 保存索引值,可以任意调用别的数组来达到对应插入数据效果
liArr[i].onclick = function(){
// text.innerHTML = this.innerHTML;
//this.className = "active";
this.setAttribute("class","active");
//先清除所有的类名
for(var j = 0; j < liArr.length; j++){
liArr[j].className = "";
}
this.className = "active";
//console.log(i);
text.innerHTML = data[this.index];
}
//通过js添加修改类名,来对应已经定义好的样式!
//此种方法可以通过,每次点击进行类名清空来使其恢复原样!
//以此达到点此去彼的情况
//思考:可不可以通过this 与 that 以及闭包特性解决呢？
}
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
