HTML中tab表单的切换

最新推荐文章于 2024-09-22 14:11:19 发布

忆晨丶

最新推荐文章于 2024-09-22 14:11:19 发布

阅读量1.2k

点赞数 1

分类专栏： Javascript 文章标签： html js

本文链接：https://blog.csdn.net/cst522445906/article/details/116902446

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			h2{
				border:1px solid blue;
				width: 100px;
				height: 35px;
				float: left;
				text-align: center;
				margin: 0;
			}
			.conten{
				border: 1px solid blue;
				width: 406px;
				height:400px ;
			}
			.conten div{
				display: none;
			}
			.current{
				background-color: pink;
			}	
			.conten .show{
				display: block;
			}	
			</style>
	</head>
	<body>
		<div class="heads">
			<h2 class="current" onclick="changeText(0)" >热点</h2>
			<h2 onclick="changeText(1)">娱乐</h2>
			<h2 onclick="changeText(2)">段子</h2>
			<h2 onclick="changeText(3)">体育</h2>
		</div>
		<div class="conten">
			<div class="show">本页面显示热点新闻</div>
			<div>本页面显示娱乐新闻</div>
			<div>本页面显示搞笑段子</div>
			<div>本页面显示体育新闻</div>
		</div>
		<script type="text/javascript">
			var h=document.getElementsByClassName("heads")[0].getElementsByTagName("h2");
			var tex=document.getElementsByClassName("conten")[0].getElementsByTagName("div");
			function changeText(index){
				for (i=0;i<h.length;i++) {
					if (i==index) {
						h[i].className="current";
						tex[i].className="show";
					} else{
						h[i].className="";
						tex[i].className="";
					}
				}
			}
		</script>
	</body>
</html>