码迷,mamicode.com
首页 > 其他好文 > 详细

P12 简单选项卡功能

时间:2020-07-11 17:09:21      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:meta   选项卡   button   ini   for   UNC   等价   按钮   添加   

<!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>

 

P12 简单选项卡功能

标签:meta   选项卡   button   ini   for   UNC   等价   按钮   添加   

原文地址:https://www.cnblogs.com/runmoxin/p/13284017.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!