排他思想

//首先获取所有的li
var box = document.getElementsByClassName("box");
//循环调用函数 有几个box,调用几次 互不影响
for(var i = 0;i<box.length;i++){
    fn(box[i]);
}
function fn(ele){
    var allLis = ele.getElementsByTagName("li");
    var allSpan = ele.getElementsByTagName("span");
    for(var i = 0;i < allLis.length;i++){
        //为每个li绑定索引值
        allLis[i].index = i;
        allLis[i].onmouseover = function(){
            //为所有的li标签添加鼠标移入事件  排他思想，干掉所有人，设置自己
            for(var j = 0;j<allLis.length;j++){
                allLis[j].className = "";
                allSpan[j].className = "";
            }
            //设置当前鼠标移入的类名为li
            this.className = "li";
            //设置当前的索引值所对应的span标签的类名为span
            allSpan[this.index].className = "span";
        }
    }
}