//首先获取所有的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";
}
}
}
排他思想
最新推荐文章于 2022-05-31 20:47:18 发布