思路
让tab栏的a连接与下面的section产生关联，a连接的自定义属性data-count=section的id
data自定义属性的使用
<body>
<nav>
<a href="javascript:;" data-count="local">国内新闻</a>
<a href="javascript:;" data-count="globle">国际新闻</a>
</nav>
<section id="local">
<ol>
<li>禽流感</li>
<li>南方大旱</li>
</ol>
</section>
<section id="globle">
<ol>
<li>南方大旱</li>
<li>禽流感</li>
</ol>
</section>
<script>
(function (index) {
var tabs = document.querySelectorAll("nav > a"),
counts = document.querySelectorAll("section"),
i = 0;
len = tabs.length;
for (; i < len; i++) {
var tab = tabs[i];
//排他
tab.classList.remove("active");//h5的dom操作
//页面初始化。给tab栏第一个连接加样式，使其section显示
if (index === i) {
tab.classList.add("active");//给tab栏的a连接添加样式
document.querySelector("#" + tab.dataset["count"]).style.display = "block";//让tab栏第一个连接下的section显示
}
///点击时的样式切换
tab.onclick = function () {
if (this.classList.contains("active")) {
return false;//点击第一个无变化
}
//排他
for (var j = 0; j < len; j++) {
tabs[j].classList.remove("active");//清除所有active
}
this.classList.add("active");
for (var k = 0; k < counts.length; k++) {
counts[k].style.display = "none";//让所有section隐藏
}
document.querySelector("#" + this.dataset["count"]).style.display = "block";//让tab中点击的a连接下的section显示
}
}
})(0)
</script>
</body>
