【js实例】js实现点击标题标签切换显示对应内容

标题标签层点击后切换显示对应的内容层

<script>
    //获取所有标题标签层和内容层
    var oul = document.getElementById("NewsUl"),
         oli = oul.getElementsByTagName("li"),
         art = document.getElementsByTagName("article");
    //构建所有标签循环
    for (var num=0; num<oli.length; num++) {
        //设置当前标签点击后的事件
        oli[num].onclick=function() {
            for (var i=0; i<oli.length; i++) {
            //遍历所有标签，删除样式名称
                oli[i].removeAttribute("class");
                art[i].removeAttribute("class");
                //为所有标签层和内容层添加独一无二的标记
                oli[i].setAttribute("value",i);
                art[i].setAttribute("id",'art'+i);
            }
            //为当前点击的标签添加样式名称
            this.className="on";
            //找到当前点击的标签对应的内容层，并添加样式名称
            document.getElementById('art'+this.value).className="on";
        }
    }
</script>