手写简易Tab选项卡组件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39585562/article/details/77488768

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				width: 600px;
				height: 600px;
				margin: 0 auto;
			}
			ul{
				clear: both;
				list-style: none;
			}
			.tab-title{
				position: relative;
				float: left;
				width: 80px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				z-index: 999;
				border: 1px solid rosybrown;
			}
			.active{
				border-bottom: 1px solid #fff;
				color: burlywood;
			}
			.tab-content{
				position: relative;
				width: 600px;
				height: 500px;
				clear: both;
				top: -1px;
				border: 1px solid rosybrown;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li class="tab-title active">tab1</li>
				<li class="tab-title">tab2</li>
				<li class="tab-title">tab3</li>
			</ul>
			<div class="tab-content">content1</div>
			<div class="tab-content">content2</div>
			<div class="tab-content">content3</div>
		</div>
		<div class="box">
			<ul>
				<li class="tab-title active">tab1</li>
				<li class="tab-title">tab2</li>
				<li class="tab-title">tab3</li>
				<li class="tab-title">tab4</li>
				<li class="tab-title">tab5</li>
			</ul>
			<div class="tab-content">content1</div>
			<div class="tab-content">content2</div>
			<div class="tab-content">content3</div>
			<div class="tab-content">content4</div>
			<div class="tab-content">content5</div>
		</div>
	</body>
	<script type="text/javascript">
		var boxs = document.getElementsByClassName("box");
		var box = boxs[0];
		var box2 = boxs[1];
		var uls = document.getElementsByTagName("ul");
		var ul = uls[0];
		var ul2 = uls[1];
		var titles = ul.getElementsByTagName("li");
		var title2s = ul2.getElementsByTagName("li");
		var contents = box.getElementsByClassName("tab-content");
		var content2s = box2.getElementsByClassName("tab-content");
		
		//3个tab
		setStyle(contents)
		tabChooice(titles,contents);
		
		//5个tab
		setStyle(content2s);
		tabChooice(title2s,content2s);
		
		//设置除了第一个content外，其余的display都设置为none
		function setStyle(cons){
			for (var i = 1; i < cons.length; i++) {
				cons[i].style.display = "none";
			}
		}
		
		//设置tab切换
		function tabChooice(elems,cons){
			var activeNum = 0;
			for (var i = 0; i < elems.length; i++) {
				!function (i){
					elems[i].onclick = function (){
						elems[activeNum].className = "tab-title";
						cons[activeNum].style.display = "none";
						elems[i].className = "tab-title active";
						cons[i].style.display = "block";
						activeNum = i;
					}
				}(i);
			}
		}
		
		
		
	</script>
</html>

js实现tab切换