JavaScript选项卡

最新推荐文章于 2024-05-29 18:02:20 发布

YOUAFR

最新推荐文章于 2024-05-29 18:02:20 发布

阅读量296

点赞数

分类专栏： day03

本文链接：https://blog.csdn.net/YOUAFR/article/details/78186082

版权

day03 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<style type="text/css">
			*{
				padding: 0;margin: 0;list-style: none;
			}
			#ul{
				height: 20px;
			}
			#ul li{
				float: left;
				width: 40px;
				height: 20px;
			}
			#smallbox{
				width: 160px;
				height: 100px;				
				position: relative;
			}
			#smallbox div{
				width: 160px;
				height: 100px;
				border: 1px solid red;
				position: absolute;
				float: left;
				display: none;
			}
			.active{
				border-top:1px solid red;
			}
		</style>

<body>
		<div id="bigbox">
			<ul id="ul">
				<li class="active">新闻</li>
				<li>体育</li>
				<li>娱乐</li>
				<li>综艺</li>
			</ul>
			<div id="smallbox">
				<div id="box_one" style="display: block;">新闻</div>
				<div id="box_tow">体育</div>
				<div id="box_three">娱乐</div>
				<div id="box_four">综艺</div>
			</div>
		</div>
	</body>

<script type="text/javascript">
		var aul = document.getElementById("ul");
		var bli = aul.getElementsByTagName("li");
//		alert(bli.length);
		var cdiv = document.getElementById("smallbox");
		var ddiv = cdiv.getElementsByTagName("div");
//		alert(ddiv.length);
		for(var i = 0; i<bli.length; i++){	//对li进行遍历，获取点击的是哪个li
			bli[i].onclick = function(){
				for(var j = 0; j<ddiv.length; j++){	//对要显示的div进行遍历
					bli[j].className = "";
					ddiv[j].style.display = "none";	//当点击li时候，让所有div都隐藏
					if(this == bli[j]){	//判断当前点击的li是所有li中的哪一个 获取哪个j 
						ddiv[j].style.display = "block";	//让获得的j 即对应的点击哪个li的div显示
						this.className = "active";
					}
				}
			}
		}		
	</script>

YOUAFR

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript选项卡

*{ padding: 0;margin: 0;list-style: none; } #ul{ height: 20px; } #ul li{ float: left; width: 40px; height: 20px; } #smallbox{ width: 160px; height: 100px;
复制链接

扫一扫

专栏目录