tab选项卡简易代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>tab选项卡代码</title>
		<style type="text/css">
			
			.title {
				width: 500px;
				height: 50px;
				color: black;
				border: 1px solid gray;
				margin: 0;
				display: flex;
			}
			
			.title span {
				width: 80px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				float: left;
				font-family: "微软雅黑";
				font-size: 24px;
				flex: 1;
				border-right: 1px solid black;
			}
			.title span:nth-child(3){
				border-right: none;
			}
			.tab {
				color: red;
				background-color: #999;
				cursor: pointer;
			}

			#tab>div {
				width: 500px;
				height: 200px;
				border: 1px solid gray;
				display: none;
				text-align: center;
				line-height: 200px;
				font-family: "微软雅黑";
				font-size: 24px;
			}
			
			#tab .content {
				display: block;
			}
		</style>
	</head>

	<body>
		<div id="tab">
			<h2 class="title">
				<span class="tab" onmouseover="changeTab(this)">选项一</span>
				<span onmouseover="changeTab(this)">选项二</span>
				<span onmouseover="changeTab(this)">选项三</span>
			</h2>
			<div class="content" style="background: greenyellow;">内容一</div>
			<div style="background: cyan;">内容二</div>
			<div style="background: goldenrod;">内容三</div>
		</div>
	</body>

</html>
<script type="text/javascript">
	// 获取所有的span标签组
	var tabs = document.getElementById("tab").getElementsByTagName("span");
	// 获取所有的div标签组
	var cts = document.getElementById("tab").getElementsByTagName("div");

	function changeTab(current) {
		for(i = 0; i < tabs.length; i++) {
			if(tabs[i] == current) {
				tabs[i].className = "tab";
				cts[i].className = "content";
			} else {
				tabs[i].className = "";
				cts[i].className = "";
			}
		}
	}
</script>
tab选项卡简易代码

猜你喜欢
