window.onload = function() {//页面加载完成后出发函数

        var oUl1 = document.getElementById("ul1");   //获取id为ul1的节点

        var aLi = oUl1.getElementsByTagName("li");   //获取id为ul1下的所有li节点

        var oDiv = document.getElementById("tab-list");   //获取id为tab-list的节点

        var aDiv = oDiv.getElementsByTagName("div");   //获取id为tab-list下的所有div节点

        for(var i = 0; i < aLi.length; i++) {   //遍历所有ul1下的li节点

            aLi[i].index = i;   //保存aLi[i]的下标（因为当鼠标滑过ul1下的li节点时此li的下标和tab-list下的div节点的下标相同，方便以后调用！）

            aLi[i].onmouseover = function() {   //当鼠标滑过ul1下的li节点时触发函数

                for(var i = 0; i < aLi.length; i++) {  //遍历所有ul1下的li节点

                    aLi[i].className = "";  //删除ul1下的li节点className

                }

                this.className = "active";  //设置鼠标滑过ul1下的改li节点的className为“active”（css样式表提前设置好改active样式！）

                for(var j = 0; j < aDiv.length; j++) {   //遍历id为tab-list下所有div节点

                    aDiv[j].className = "hide";   //id为tab-list下所有div节点的className设置为“hide”（即隐藏，在CSS样式表中提前已经设置了 .hide{display:none;}）

                }

                aDiv[this.index].className = "show";   //当鼠标滑过ul1下的li节点时和此li节点下标相同的div节点的className设置为show 即显示，在CSS样式表中提前已经设置了 .show{display:block;}

            }        

        }

    }

希望采纳我的回答，新手自学可能回答有错误的地方所以该回答仅供参考！

onmouseover事件触发： for循环把3个li标签的class属性设为hide 然后把当前对象的class属性设为show 

然后再style 标签里把 .hide{ display:none; } 实现隐藏其他div标签