js小案例：实现选项卡功能

js小案例：实现选项卡功能

html部分代码

    <button>1</button>
    <button>2</button>
    <button>3</button>
    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>

css部分代码

 <style>
        div {
            width: 100px;
            height: 100px;
            background: #ccc;
            border: 1px solid black;
            display: none;
        }
        button.active {
            background-color: pink;
        }
        div.dis {
            display: block;
        }
    </style>

js部分代码

  <script>
        window.onload=function(){
       
        var allBtn = document.getElementsByTagName('button');
        var allDiv = document.getElementsByTagName('div');
        //给所有的按钮给上点击事件
        for (var i = 0; i < allBtn.length; i++) {
            allBtn[i].index = i;
            allBtn[i].onclick = function () {
                for (var j = 0; j < allBtn.length; j++) {//点击按钮时先将所有的按钮的背景颜色清空
                    allBtn[j].className = '';
                    allDiv[j].className = '';
                }
                this.className = 'active';
                allDiv[this.index].className = 'dis';
            }
        }
    }
    </script>

通过点击button，将当前的index值给到allDiv这个数组的下标，通过for循环历遍内容区域，如果所对应的索引值相同则将其内容显示出来，否则进行隐藏。

运行效果