原生JavaScript选项卡

效果:
原生JavaScript选项卡_第1张图片
代码:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
		*{
     
			margin: 0;
			padding: 0;
		}
		ul,li{
     list-style: none;}
		.box{
     
			width:300px;
			height:300px;
			border:1px solid red;
			margin: 10px auto;
			position: relative;
		}
		.tab li{
     
			float:left;
			width:98px;
			border:1px solid yellowgreen;
			height:35px;
			text-align: center;
			line-height: 35px;
			background-color: greenyellow;
			cursor:pointer;	
		}
		
		.tablist{
     
			position: absolute;
			left:0;
			top:37px;
			width:100%;
			height:263px;
			font-size: 60px;
			text-align: center;
			display: none;
		}
		
		.hot{
     
			color:#fff;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul class="tab">
			<li class="hot">菜单一</li>
			<li>菜单二</li>
			<li>菜单三</li>
		</ul>
		<div class="tablist" style="background-color: pink;"></div>
		<div class="tablist" style="background-color: aqua;"></div>
		<div class="tablist" style="background-color: deepskyblue;"></div>
	</div>
	<script>
		var li=document.getElementsByTagName("li");
		
		var list=document.getElementsByClassName("tablist");
		
		list[0].style.display="block"
		
		
		for(var i=0;i<li.length;i++){
     
			//保存下标
			li[i].index=i;
			li[i].onclick=function(){
     
				for(j=0;j<li.length;j++){
     
					li[j].className="";
					list[j].style.display="none";
				}
				list[this.index].style.display="block";
				this.className="hot";
			}
		}
		
		</script>
</body>
</html>

你可能感兴趣的:(html,JavaScript,选项卡,js,html,javascript)