P12 简单选项卡功能 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单选项卡</title>
    <style>
        #div1 .active {
            background: yellow;
        }

        #div1 div {
            width: 200px;
            height: 200px;
            background: rgb(130, 231, 116);
            border: 2px solid black;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv1 = document.getElementById('div1');
            var oBtns = oDiv1.getElementsByTagName('input');
            var allDivs = oDiv1.getElementsByTagName('div');
            for (let i = 0; i < oBtns.length; i++) {
                /* 
                其实这一行没啥用, 这里给按钮添加的下标是为了给下面的this.index用的, 等价于当前循环变量的值 
                添加了这一行之后, 是想使用this.index获取当前按钮的自定义属性index的值, 其实就是循环变量i的值
                */
                oBtns[i].index = i;// 这里的意思就是给按钮添加一个自定义的属性index, 它的值就是i
                // 给所有的按钮添加点击事件
                oBtns[i].onclick = function () {
                    // 因为有可能上面的四个之前已经有了高亮的背景颜色, 表示显示class
                    // 当我们点击别的按钮的时候, 应该将所有的按钮的class = '', 然后再给当前被点击的按钮的背景添加背景
                    for (let j = 0; j < oBtns.length; j++) {
                        oBtns[j].className = '';
                        allDivs[j].style.display = 'none';
                    }

                    // 这里的this, 是js中为我们提供, 当前发生事件的按钮对象
                    this.className = 'active';
                    // allDivs[this.index].style.display = 'block';
                    allDivs[i].style.display = 'block';
                    // 接下来就是给所有的div的display设置为none, 然后让当前的按钮对应的div显示
                    /* 
                    我们遇到的问题有这些:
                    1. 首先我怎么确认显示哪个div, 应该是通过数组下标的形式来确认, 刚好按钮和div是一一对应的关系
                     */


                }

            }
        }
    </script>
</head>

<body>
    <div id="div1">
        <input class="active" type="button" value="教育"> <!-- 初始显示的选项卡 -->
        <input type="button" value="培训">
        <input type="button" value="招生">
        <input type="button" value="出国">
        <div style="display: block;">1111</div> <!-- 这里的是选项卡中初始显示的div -->
        <div style="display: none;">2222</div>
        <div style="display: none;">3333</div>
        <div style="display: none;">4444</div>
    </div>
</body>

</html>

 

posted @ 2020-07-11 16:03  Runmoxin  阅读(124)  评论(0)    收藏  举报