4. 原生js实现面向过程的选项卡

1. 描述：

点击每一个按钮，切换到对应的p标签，其他p标签隐藏

2.HTML

<div class="wrap">
        <button>按钮1</button><button>按钮2</button><button>按钮3</button>
        <p class="active">内容1</p>
        <p>内容2</p>
        <p>内容3</p>
</div>

3. CSS

        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            position: relative;
        }

        button {
            margin: 5px;
        }

        p {
            position: absolute;
            left: 0;
            width: 300px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 40px;
            border: 1px solid #000;
            display: none;
        }

        p.active {
            display: block;
        }

4.js代码

        // 点击每一个按钮 显示对应的p
        // 按钮和p的关系: 一一对应 下标
        // 获取元素，按钮、p标签
        var btns = document.querySelectorAll('button');
        var ps = document.querySelectorAll('p');
        // console.log(btns, ps);

        // 每一个
        for (var i = 0; i < btns.length; i++) {
            // 设置自定义索引，用于存按钮的下标
            btns[i].index = i;
            // 给按钮添加点击事件
            btns[i].onclick = function () {
                // 切换到对应的p 
                // 排他，将p设置成隐藏状态
                for (var j = 0; j < ps.length; j++) {
                    ps[j].className = '';
                }
                // 显示指定下标的p标签
                ps[this.index].className = 'active';
            };
        }