js简易点击切换

 <style>
        .active {
            background-color: #f00;
        }

        div {
            display: none;
        }

        .show {
            display: block;
        }
 </style>

<button index='0'>1</button>
    <button index='1'>2</button>
    <button index='2'>3</button>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        // 获取元素
        var btns = document.querySelectorAll('button');
        var divs = document.querySelectorAll('div');
        for (var i = 0; i < btns.length; i++) {
            // 给按钮绑定自定义属性index  为了找到被点击的按钮所对应的角标
            btns[i].setAttribute('index', i);
            // 可以使用循环绑定事件
            btns[i].onclick = function () {
                // btns[i].style.background = 'red';
                // 把其他的所有按钮的样式去掉
                for (var j = 0; j < btns.length; j++) {
                    btns[j].setAttribute('class', '');
                    // btns[j].removeAttribute('class')
                    divs[j].setAttribute('class', '')
                }
                // 再给当前点击的按钮添加
                this.setAttribute('class', 'active')
                // alert(i)
                // 获取被点击的按钮所对应的角标
                var v = this.getAttribute('index');
                divs[v].setAttribute('class', 'show')
            }
        }
    </script>