[学习笔记]JavaScript基础--选项卡

最新推荐文章于 2023-08-12 11:19:06 发布

Mr_Lan_

最新推荐文章于 2023-08-12 11:19:06 发布

阅读量386

点赞数

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/Mr_Lan_/article/details/47306005

版权

JavaScript基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        #div1 .active {
            background: yellow;
        }
        /*当前的按钮为黄色*/
        #div1 div {
            width: 200px;
            height: 200px;
            background: #CCC;
            border: 1px solid #999;
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var aBtn = oDiv.getElementsByTagName('input');
            var aDiv = oDiv.getElementsByTagName('div');
            /*一个循环给所有的按钮通通加上一个事件*/
            for (var i = 0; i < aBtn.length; i++) {
                aBtn[i].index = i;
                aBtn[i].onclick = function () {

                    for (var i = 0; i < aBtn.length; i++) {
                        /*所有的按钮没有class的状态*/
                        aBtn[i].className = '';
                        /*所有的选项卡都隐藏*/
                        aDiv[i].style.display = 'none';
                    }
                    /*this:当前发生事件的元素*/
                    this.className = 'active';
                    /*让当前的选项卡显示*/
                    aDiv[this.index].style.display = 'block';
                };

            }
        };
    </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">11111</div>
        <div>22222</div>
        <div>33333</div>
        <div>44444</div>
    </div>
</body>
</html>

Mr_Lan_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[学习笔记]JavaScript基础--选项卡

#div1 .active { background: yellow; } /*当前的按钮为黄色*/ #div1 div { width: 200px; height: 200px; background: #CCC;
复制链接

扫一扫