类似选项卡的案例

最新推荐文章于 2024-09-10 15:06:52 发布

原创最新推荐文章于 2024-09-10 15:06:52 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#选项卡 #函数 #索引 #dom

思路：
分别有四个button和四个div。
button为事件调用者，每次事件发生后，记录当前索引值
通过button索引值控制其对应的div。
用到的知识点：dom,函数，this关键字，if、else语句

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>

    <body>
        <script type="text/javascript">
            window.onload = function() { //预加载页面
                var btn = document.getElementsByTagName('button');
                var divs = document.getElementsByTagName('div');
                for(var i = 0; i < btn.length; i++) { //把每一个button都遍历一遍
                    btn[i].index = i; //给按钮排序
                    divs[i].style.display = 'none';
                    btn[i].onclick = function() {
                        index = this.index; // 记录当前被点击对象的角标，把当前事件的调用者'btn'的角标赋值给变量'index'.
                        //                  alert(index);
                        if(btn[index].innerHTML == '关闭窗口' + (index + 1)) { //如果当前按钮的内容是 ‘关闭’，点击后变为‘打开’ 
                            btn[index].innerHTML = '打开窗口' + (index + 1);
                        } else {
                            btn[index].innerHTML = '关闭窗口' + (index + 1); //否则 当前按钮的内容一定是‘打开’，点击后变为‘关闭’
                        }
                        if(divs[index].style.display == 'none') { //如果当前box是显示状态，点击后隐藏它。 
                            divs[index].style.display = 'block';
                        } else {
                            divs[index].style.display = 'none'; //如果当前box是隐藏状态，点击后显示它。 
                        }
                    }
                }
            }
        </script>

        <button>打开窗口1</button>
        <button>打开窗口2</button>
        <button>打开窗口3</button>
        <button>打开窗口4</button>
        <div id="box1">1</div>
        <div id="box2">2</div>
        <div id="box3">3</div>
        <div id="box4">4</div>
        <style type="text/css">
            div {
                line-height: 100px;
                text-align: center;
                width: 325px;
                height: 100px;
                background: palegoldenrod;
                border: 1px solid cornflowerblue;
            }

            #box1 {
                background: darkgoldenrod;
            }

            #box2 {
                background: cornflowerblue;
            }

            #box3 {
                background: crimson;
            }

            #box3 {
                background: darkgray;
            }
        </style>
    </body>

</html>