tab切换实现方式2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换2回顾</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].onclick = function() {
for (var i = 0; i < spans.length; i++) {
if(spans[i] == this) {
this.className = 'select';
lis[i].className = 'show';
}else {
spans[i].className = '';
lis[i].className = '';
}
}
}
}
</script>
</body>
</html>
