                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

请明白的同学帮忙看一下这段JS代码应该如何修改才能达到切换效果

	<script type="text/javascript">
		window.onload=function(){
			var oLis=document.getElementsByTagName('li');
			var oDivs=document.getElementsByTagName('div');
			for( var i=0;i<oLis.length;i++){
				oLis[i].onclick=function(){
					for(var n=0;n<oLis.length;n++){
						if(n==i){
							oDiv[n].className='on';
						}
						else{
							oDiv[n].className='hide';
						}
						
					}
				}
			}
		}
	</script>

请大家看看是哪里进入了误区，在这个思路的基础上应该如何修改代码呢？

Luther_Alice

2015-12-23

源自：JavaScript进阶篇 10-1

关注问题我要回答

1028

操作

收起

4 回答

过去了过去
2015-12-31

<script type="text/javascript">     
    window.onload=function(){
        var oTab = document.getElementById("tabs")
        var li = document.getElementsByTagName("li");
        var div = oTab.getElementsByTagName("div");//oTabs.get...是为了定义className作用对象为id为tabs下的所有文本div
        
        for(var i=0;i<li.length;i++){//获取所有i编号的元素
        	(function  (i) {     //闭包函数，就可以把参数i传递到函数里面了
        		li[i].onclick = function(){//再注册一个点击事件，当点击的时候所有标签都恢复最初状态
	            	for(var n=0;n<li.length;n++){//这步是相对于未被点击部分的样式
		                li[n].className = "";
		                div[n].className = "hide";
	           		}
		            this.className = "on";//再对点击事件添加相应的属性
		            div[i].className = "";//通过之前的index编号绑定的指定div
           	 	}
        	})(i);  //闭包函数
        }
    }
	</script>