Tab切换选项卡

最新推荐文章于 2020-09-19 11:19:16 发布

那就可爱多一点点

最新推荐文章于 2020-09-19 11:19:16 发布

阅读量167

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_37241934/article/details/82933458

版权

HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tab切换选项卡</title>
<style>
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; border:1px solid #999; display:none;}
</style>
<script>
//此处编写代码，实现tab标签,鼠标单击某个按钮显示对应的
	window.onload=function (){
				var oDiv=document.getElementById('div1');
				var aBtn=oDiv.getElementsByTagName('input');
				var aDiv=oDiv.getElementsByTagName('div');
				
				
				for(var i=0;i<aBtn.length;i++){			
					
					aBtn[i].index=i;			
					aBtn[i].onclick=function (){
						
						for(var i=0;i<aBtn.length;i++){	
							aBtn[i].className='';
							aDiv[i].style.display='none';
						}
						this.className='active';
						aDiv[this.index].style.display='block';
					}
				}
			}
</script>
</head>

<body>
<div id="div1">
	<input class="active" type="button" value="教育" />
	<input type="button" value="培训" />
	<input type="button" value="招生" />
	<input type="button" value="出国" />
    <div style="display:block;">教育</div>
    <div>培训</div>
    <div>招生</div>
    <div>出国</div>
</div>
</body>
</html>

那就可爱多一点点

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Tab切换选项卡

&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;Tab切换选项卡&lt;/title&gt;&lt;style&gt;#div1 .active {background:yellow;}#div1 div {width:200px; hei
复制链接

扫一扫