闭包实现选项卡的切换

最新推荐文章于 2022-12-08 21:06:13 发布

zoekitty

最新推荐文章于 2022-12-08 21:06:13 发布

阅读量664

点赞数

分类专栏： javascript 文章标签：闭包

本文链接：https://blog.csdn.net/zoekitty/article/details/52298074

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style:none;
		}
		#list{
			text-align: center;
			overflow: hidden;

		}
		#list li{
			float: left;
			width: 20px;
			line-height:20px;
			background:#ccc;
			margin: 0 10px;
		}
		#con p{
			width: 500px;
			height: 400px;
			background: pink;
			display: none;
		}
		#con .cur{
			display: block;
		}
	</style>
	<body>
		<ul id="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		<div id="con">
			<p class="cur">段落1</p>
			<p>段落2</p>
			<p>段落3</p>
			<p>段落4</p>
			<p>段落5</p>
			<p>段落6</p>
		</div>
	</body>
	<script type="text/javascript">
		//1.获取按钮和段落
		var btn = document.getElementById('list').getElementsByTagName('li');
		var p = document.getElementById('con').getElementsByTagName('p');
		//2.遍历按钮添加事件
		for(var i  = 0; i<btn.length;i++){
			
			//3.闭包添加事件
			(function(index){
				//4.给按钮添加单击事件
				btn[index].onclick = function(){
					//5.根据索引值找到对应的p标签，让这个标签显示，其它的隐藏
					for(var i = 0; i<p.length;i++){
						//6.循环遍历每个p标签判断这个标签的索引值是否等于index，等于就显示否则就隐藏
						/*if(i==index){
							p[i].className = 'cur';
						}else{
							p[i].className = '';
						}*/
						//优化
						p[i].className = i==index?'cur':'';
						
					}
					
				}
				
			})(i);
			
		}
	</script>