<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";} #tabs {width:290px;padding:5px;height:150px;margin:20px;} #tabs ul{ list-style:none;display: block;height:30px;line-height:30px; border-bottom:2px saddlebrown solid; } #tabs ul li{ background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px; margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none; display:inline-block;width:60px;text-align: center; } #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;} #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;} .hide{display: none;} </style> <script type="text/javascript"> window.onload = function(){ //获取最外层div节点 var oTab = document.getElementById("tabs"); //获取第一个ul节点 var oUl = oTab.getElementsByTagName("ul")[0]; //获取ul节点中的所有li节点 var oLis = oUl.getElementsByTagName("li"); //获取所有最外层div中的所有div节点 var oDivs= oTab.getElementsByTagName("div");其中的for循环语句不是很理解，代码如下：for(var i= 0;i<oLis.length;i++){ oLis[i].index = i; //这一句代码起什么作用？ oLis[i].onclick = function() { for(var n= 0;n<oLis.length;n++){ oLis[n].className = ""; oDivs[n].className = "hide"; } this.className = "on"; oDivs[this.index].className = ""; } };for循环中的代码块语句作用不是很理解，请大神指教。是点击事件发生时将所有的li元素样式设置为 非 on类样式，所有的div元素设置为 hide类样式吗？然后再将点击事件的当前对象li设置为on类样式，当前对应索引的div样式设置为非hide类样式吗？
添加回答
举报
0/150
提交
取消