更新一些上课的小案例...

See the Pen  js小案例：利用forEach完成选项卡切换 by zhaolanzhen (@mrszhao)  on CodePen.

js代码部分主要是：

<script>
var oLi = document.querySelectorAll(".title li");
var oUl = document.querySelectorAll(".content ul");
// console.log(oUl);

//初始化
var num = 0;
var oldLi = null;
oLi[num].classList.add("active");
oldLi = oLi[num];
oUl.forEach(function (item, index) {
if (!(num == index)) {
item.classList.add("hidden");
// console.log(index);
}
})

oLi.forEach(function (item, index) {
item.onmouseover = function () {
/*  oLi.forEach(function (item) {
       item.classList.remove("active");
                 }) */
oldLi.classList.remove("active");
this.classList.add("active");
oldLi = this;
//  先把所有ul隐藏
oUl.forEach(function (item) {
item.classList.add("hidden");
})
// 再把鼠标经过的那个li对应的ul显示
oUl[index].classList.remove("hidden");

}
})
</script>