tab切换实现方式1

tab切换实现方式1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab切换回顾</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#wrap {
			width: 600px;
			margin: 100px auto 0;
			overflow: hidden;
		}
		#tit {
			height: 30px;
		}
		#tit span {
			float: left;
			width: 200px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 18px;
			background: #ccc;
		}
		#tit span.select {
			background: #333;
			color: #ccc;
		}
		#con {
			width: 560px;
			padding: 20px;
			overflow: hidden;
			background: pink;
		}
		#con li {
			height: 200px;
			line-height: 200px;
			text-align: center;
			font-size: 100px;
			display: none;
		}
		#con li.show {
			display: block;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="tit">
			<span class="select">选项一</span>
			<span>选项二</span>
			<span>选项三</span>
		</div>
		<ul id="con">
			<li class="show">1111</li>
			<li>2222</li>
			<li>3333</li>
		</ul>
	</div>
	<script>
		var tit = document.getElementById('tit');
		var con = document.getElementById('con');
		var spans = tit.children;
		var lis = con.children;
		// console.log(lis.length);
		for (var i = 0; i < spans.length; i++) {
			spans[i].index = i;
			spans[i].onclick = function() {
				for (var i = 0; i < spans.length; i++) {
					spans[i].className = '';
					lis[i].className = '';
				}
				this.className = 'select';
				lis[this.index].className = 'show';
			}
		}
	</script>
</body>
</html>