请选择 进入手机版 | 继续访问电脑版
入门社区_全栈技术从入门到精通

[特效] tab选项卡简易代码

2019-6-26 16:26
1120
[HTML] 纯文本查看 复制代码
<!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">选项一</span>
				<span>选项二</span>
				<span>选项三</span>
			</h2>
			<div class="content" style="background: greenyellow;">内容一</div>
			<div style="background: cyan;">内容二</div>
			<div style="background: goldenrod;">内容三</div>
		</div>
	</body>
 
<ml>
<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>
 
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|入门社区

© 2016- RuMenWu.

返回顶部