选项卡制作学习

最新推荐文章于 2022-02-03 17:26:44 发布

青天诀

最新推荐文章于 2022-02-03 17:26:44 发布

阅读量463

点赞数

分类专栏： Web前端文章标签： Web前端

本文链接：https://blog.csdn.net/u012193330/article/details/40889399

版权

Web前端专栏收录该内容

123 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<style type="text/css">
			#contents div{
				width:230px;
				height:300px;
				background-color: #222;
				color:#FFFFFF;
				border:1px solid #DDDDDD;
				display:none;
			}
			.active{
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.οnlοad=function()
			{
				var Btns=document.getElementById('btns');
				var adiv=document.getElementById('contents');
				var buttons=btns.getElementsByTagName('input');
				var ds=adiv.getElementsByTagName('div');
				for(var i=0;i<buttons.length;i++)
				{
					buttons[i].index=i;
					buttons[i].οnclick=function(){
						for(var j=0;j<buttons.length;j++)
						{
							buttons[j].className='';
							ds[j].style.display='none';
						}
						this.className='active';
						ds[this.index].style.display='block';
						
					};
				}
			};
		</script>
		
	</head>
	<body>
		
		<div id="main">
			<div id="btns">
				<input class="active" type="button" value="中国" />
				<input type="button" value="美国" />
				<input type="button" value="英国" />
				<input type="button" value="日本" />
			</div>
			<div id="contents">
				<div style="display: block;">中国</div>
				<div>美国</div>
				<div>英国</div>
				<div>日本</div>
			</div>
		</div>
		
	</body>
</html>

运行结果图：