基本信息
源码名称：纯js实现：多个选项卡切换效果
源码大小：2.02KB
文件格式：.html
开发语言：js
更新时间：2020-04-20
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍
实行多个选项卡的切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡</title>
		<style type="text/css">
			.active{
				background:orange;
			}
			#div1 div{
				width:200px;
				height: 200px;
				border: 1px solid orange;
				margin-top:10px;
				display: none;
			}
			
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				var oDiv1=document.getElementById("div1");
				var oBtns=oDiv1.getElementsByTagName("input");
				var oDivs=oDiv1.getElementsByTagName("div");
				for(var i=0;i<oBtns.length;i  )
				{
					oBtns[i].index=i;//index: 人为添加的标记，目的是获取当前的点击的那个按钮
					oBtns[i].onclick=function()
					{
						for(var i=0;i<oBtns.length;i  )
						{
							oBtns[i].className="";//初始化，取消所有按钮的背景
							oDivs[i].style.display="none";//初始化，所有div不显示
						}
						this.className="active";
						oDivs[this.index].style.display="block";
						
					
					}

				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<input type="button"  value="新闻" class="active"/>
			<input type="button"  value="军事" />
			<input type="button"  value="体育" />
			<input type="button"  value="音乐" />
			
			<div style="display: block;background-color:#CCC;">
				<ul>
					<li>新闻之家</li>
					<li>新闻之家</li>
					<li>新闻之家</li>
					<li>新闻之家</li>
					<li>新闻之家</li>
				</ul>
			</div>
			<div>
				<ul>
					<li>军事之家</li>
					<li>军事之家</li>
					<li>军事之家</li>
					<li>军事之家</li>
					<li>军事之家</li>
				</ul>
			</div>
			<div>
				<ul>
					<li>体育纵横</li>
					<li>体育纵横</li>
					<li>体育纵横</li>
					<li>体育纵横</li>
					<li>体育纵横</li>
				</ul>
			</div>	
			<div>
				<ul>
					<li>音乐在线</li>
					<li>音乐在线</li>
					<li>音乐在线</li>
					<li>音乐在线</li>
					<li>音乐在线</li>
				</ul>
			</div>
		</div>
	</body>
</html>