猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何实现div串的渐显渐隐？

最近碰到一个问题，将问题简化了一下写出来，希望得到大家的指点。下面是问题：
功能实现：点击一个显示的div，该div隐藏，下一个div显示；再次点击显示的div...依次进行。源代码
为方便查看，下面也给出源代码：
1
2
3
4
5
6
7
css:
.myDiv{
display:inline-block;
width:50px;height:20px;
background-color:lightgreen;
}
.myDiv:not(:nth-child(1)){
visibility:hidden;
}
js:
window.onload=function(){
varcur=1;
varcurDiv=document.getElementById("div"+cur);
varnextDiv=document.getElementById("div"+++cur);
curDiv.onclick=function(){
curDiv.style.visibility="hidden";
nextDiv.style.visibility="visible";
}
}
目前的问题是只能进行第一次点击，之后就无法通过点击触发事件了。求教问题出在哪里，如何改进，或者有其他更好的方法？

			

				
慕码人8056858

				
浏览 746回答 2

			

			
			
		

		


		

		

			
			
2回答

			

				
				

					
					
呼如林

					
下面是我根据你的需求写的一个效果（不知道是不是这样）。Document*{margin:0;padding:0;}ul{list-style:none;padding:20px;}.demo{visibility:hidden;width:80px;margin-bottom:15px;padding:10px;background-color:red;color:blue;}.active{visibility:visible;}1234varaDemo=document.querySelectorAll('.demo'),_now=0;for(vari=0;i

					

						

							
							
						

						
0

					

				

				
			

			
		

		

			
			打开App，查看更多内容
		

	
	

	随时随地看视频慕课网APP


	
	
	

		
相关分类

		

			
			

			
				 JavaScript