<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#tab{
width:300px;
border:3px solid #ccc;
}
#tab .active{
background: #fff;
}
#tab h3{
margin:0;
padding:0;
font-size:14px;
float:left;
width:60px;
height:24px;
}
#tab div{
clear:both;
}
</style>
</head>
<body> <div id="tab">
<h3 class="active">体育</h3>
<h3>娱乐</h3>
<h3>汽车</h3>
<div class="s">
</div>
</div> <script>
var str=[
{
"title": "国内Nodejs 2015汇总",
"href": "/topic/5696e43e6272216e51bff67e"
},
{
"title": "展望Nodejs 2016和新年祝福",
"href": "/topic/56b70c15c3f170d2629955b5"
},
{
"title": "新的社区推荐客户端：Noder",
"href": "/topic/572afb6b15c24e592c16e1e6"
},
{
"title": "33333：Noder",
"href": "/topic/572afb6b15c24e592c16e1e6"
},
]
window.onload=function(){
var tab=document.getElementById("tab");
var h3=document.getElementsByTagName("h3");
var s=document.getElementsByClassName("s")[0];
for(var i=0; i<h3.length;i++){ //遍历 html中的标签元素
h3[i].index=i; //
h3[i].onclick=function(){ //在<h3>当中点击 触发 active 然后创建s的元素中内容，加载json中的数据
$this=this;
for(var i=0 ;i<h3.length;i++){
h3[i].className="";
$this.className="active";
s.innerHTML=str[$this.index].title;
}
}
}
}
</script> </body> </html>
http://jsbin.com/sorisekuhi/edit?html,css,js,console,output