html5tab标签页(添加类样式，移除类样式)

<div class="tabs">
    <div>
        <a href="javascript:;" data-target="local">国内新闻</a>
        <a href="javascript:;" data-target="global">国际新闻</a>
        <a href="javascript:;" data-target="sports">体育新闻</a>
        <a href="javascript:;" data-target="funny">娱乐新闻</a>
    </div>
    <section class="cont active" id="local">
        <ol>
            <li>习近平向2名晋升为上将军官颁发命令状</li>
            <li>郭声琨了解指导公安消防部队抗洪工作</li>
            <li>媒体：曾任职中办的这位官员仕途有变</li>
            <li>广西警方端掉地下兵工厂缴获大批炮弹</li>
            <li>她完美诠释奇葩考题夺金牌</li>
            <li>中国奥运选手在里约多次遭抢劫</li>
        </ol>
    </section>
    <section class="cont active" id="global">
        <ol>
            <li>河南再次发生矿难，死伤人数超过100</li>
            <li>禽流感次发生蔓延，温家宝指示</li>
            <li>南方大旱，农作物减产绝收面积上亩</li>
            <li>猪流感在广减产绝收发</li>
            <li>禽流感在全国多作物减产绝收面积上亩</li>
            <li>猪流感在广东群体性暴发</li>
        </ol>
    </section>
    <section class="cont" id="sports">
        <ol>
            <li>河南再次发生矿难，死伤人数超过10</li>
            <li>禽流感在全国多处农作物农延，温家宝指示</li>
            <li>南方大旱，农作物减产绝收面积上亩</li>
            <li>猪流感在广东群体性暴发</li>
            <li>禽流感在全农作物继续蔓延，温家宝指示</li>
            <li>南方大农作物减产绝收面积上亩</li>
            <li>猪流感在广东群体性暴发</li>
        </ol>
    </section>
    <section class="cont" id="funny">
        <ol>
            <li>福建发生血腥命案:两女遭割喉 1男孩被砍数刀</li>
            <li>四川原副省长李成云被查 5年前曾违纪又复出</li>
            <li>胡歌反对粉丝探班：以前请吃饭现在会黑脸</li>
            <li>曝郑爽爸爸歌厅撩妹 与女子勾肩搭背显亲密</li>
            <li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
            <li>国子监大街门匾现错字 已悬挂近10年(图)</li>
            <li>猪流感在广东群体性暴发</li>
        </ol>
    </section>
</div>
4、js代码
<script>
    (function(key){
        //1.获取所有a标签
        var allA=document.querySelector(".tabs").querySelector("div:first-child").querySelectorAll("a");
        //初始化操作
        for(var i=0;i<allA.length;i++){
            if(i==key){
                allA[i].classList.add("active");
                var active=allA[i].dataset["target"];
                document.querySelector("#"+active).style.display='block';
            }
            //2.循环遍历所有的a标签，为其添加点击事件
            allA[i].onclick=function(){
                //3.判断当前是否是当前已激活的页，如果是，则不进行处理
                if(this.classList.contains("active")){
                    return;
                }
                //4.否则，则需要找到当前a标签对应的data-target属性，利用这个属性找到对应id的section进行样式的设置，让其显示
                //4.1先移除之前a标签的active类样式
                var aActive=document.querySelector(".active");
                aActive.classList.remove("active");
                //4.2让之前显示的section隐藏
                var currentTarget=aActive.dataset["target"];
        document.querySelector("#"+currentTarget) .style.display ="none";
                //4.3为其添加active样式
                this.classList.add("active");
                //4.4获取当前被点击的a标签的data-target属性
                var value=this.dataset["target"];
                //4.5让对应id的section显示--添加active类样式即可
                document.querySelector("#"+value).style.display="block";
            };
        }
    })(0);
</script>