从一个简单的Tab切换开始—

从一个简单的Tab切换开始——与AJAX的结合

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #tab{
            300px;
           border:3px solid #ccc;
        }
        #tab .active{
            background: #fff;
        }
        #tab h3{
            margin:0;
            padding:0;
            font-size:14px;
            float:left;
            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