js原生实现选项卡功能

Posted 2020-09-23

结构：

<div id="box">
    　　<input type="button" value="书籍" class="on">
    　　<input type="button" value="图片">
    　　<input type="button" value="专栏">
    　　<div style="display:block;">书籍</div>
    　　<div>图片</div>
    　　<div>专栏</div>
</div>

样式：

#box div{
            width:200px;
            height:200px;
            background:#ccc;
            display:none;
        }
        .on{
            color:#fff;
            background:green;
        }

选项卡的思路是当我们点击当前的按钮的时候，先清空所有的样式，再给当前的按钮和盒子添加样式。

<script>
    //获取元素
    var oBox = document.getElementById("box");
    var aBtn = oBox.getElementsByTagName("input");
    var aDiv = oBox.getElementsByTagName("div");
    //aBtn是一组元素，所以需要用到for循环
    for(var i=0;i<aBtn.length;i++){
        aBtn[i].index=i;
        aBtn[i].onclick=function(){
            for(var k=0;k<aBtn.length;k++){//先清空所有的样式
                aBtn[k].className =‘‘;
                aDiv[k].style.display =‘none‘;
            }
            //给当前的按钮和div添加样式
            this.className =‘on‘;
            aDiv[this.index].style.display =‘block‘;
        };
    }
</script>


相关知识点：

index 属性可返回下拉列表中选项的索引位置

语法：optionObject.index


className 属性设置或返回元素的 class 属性。

object.className=classname