Html5实现Tab栏的切换
描述：
用户点击Tab栏上面的标题，下面的内容跟着改变，用Html5中新的标签及API制作，所以兼容性不好。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab栏的切换</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.tabs {
width: 400px;
margin: 30px auto;
background-color: #FFF;
border: 1px solid #C0DCC0;
box-sizing: border-box;
}
.tabs nav {
height: 40px;
text-align: center;
line-height: 40px;
overflow: hidden;
background-color: #C0DCC0;
display: flex;
}
nav a {
display: block;
width: 100px;
border-right: 1px solid #FFF;
color: #000;
text-decoration: none;
}
nav a:last-child {
border-right: 0 none;
}
nav a.active {
background-color: #9BAF9B;
}
.cont {
overflow: hidden;
display: none;
}
.cont ol {
line-height: 30px;
}
</style>
</head>
<body>
<div class="tabs">
<nav>
<a href="javascript:;" data-cont="local">国内新闻</a>
<a href="javascript:;" data-cont="global">国际新闻</a>
<a href="javascript:;" data-cont="sports">体育新闻</a>
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
</nav>
<section class="cont" id="local" >
<ol>
<li>11111111111111</li>
<li>11111111111111111111</li>
<li>111111111111111</li>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
</ol>
</section>
<section class="cont" id="global">
<ol>
<li>2222222222222222222222</li>
<li>2222222222222222222222</li>
<li>2222222222222222222222</li>
<li>2222222222222222222222</li>
<li>2222222222222222222222</li>
<li>2222222222222222222222</li>
</ol>
</section>
<section class="cont" id="sports">
<ol>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
</ol>
</section>
<section class="cont" id="funny">
<ol>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
</ol>
</section>
<script>
// 目标： 默认显示一个 当前的样式
// 点击导航，实现切换
// key 表示的当前显示的是第几个
(function(key){
// 获取所有的导航
var navs=document.querySelectorAll('nav a');
// 遍历 给导航 绑定事件，并且添加当前样式
for(var i=0;i<navs.length;i++){
// 如果是用户指定的当前样式
if(key==i){
navs[i].classList.add('active');
// 拿到要显示内容section的id
var secId=navs[i].dataset['cont'];
// 获取对应的section标签
document.querySelector('#'+secId).style.display='block';
}
// 给每一个导航绑定点击事件
navs[i].onclick=function(){
// 排他
// 之前有active样式的清除, 之前显示的section 隐藏
var currentNav=document.querySelector('.active');
// 获取对应的内容区域 ，让其隐藏
var currentId=currentNav.dataset['cont'];
// 去掉导航的active 样式
currentNav.classList.remove('active');
// 对应的内容区域
document.querySelector('#'+currentId).style.display='none';
// 突出显示自己 导航添加样式 对应的section 显示
// 给自己添加active样式
this.classList.add('active');
// 对应的section模块显示出来
var myId=this.dataset['cont'];
document.querySelector('#'+myId).style.display='block';
}
}
})(0);
</script>
</div>
</body>
</html>