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

标题标签层点击后切换显示对应的内容层，例如有一个简单的滑动标签：

<div id="tab">
    <ul>
        <li class="active">电影</li>
        <li>综艺</li>
        <li>动漫</li>
    </ul>
    <div class="active">钢铁侠</div>
    <div>快乐大本营</div>
    <div>火影忍者</div>
</div>

<script>
    var box = document.getElementById("tab"); //获取滑动标签最外层元素
    var olis = box.getElementsByTagName("li"); //获取标签元素
    var odivs = box.getElementsByTagName("div"); //获取切换内容层元素
    //构建循环，获取每一个标签
    for(var i=0; i<olis.length; i++) {
        //给每一个标签设置一个序号属性
        olis[i].index = i;
        //给每一个标签绑定点击事件
        olis[i].onclick = function () {
            //清除所有标签样式
            for(var j=0; j<olis.length; j++) {
                olis[j].className="";
                odivs[j].className="";
            }
            //给当前点击的标签加上样式
            this.className="active";
            //给当前点击的标签序号对应的内容层加上样式
            odivs[this.index].className="active";
           }
    }
</script>