1、实现原理：利用下标以及display，难点在于下标的赋值与获取。

2、整体代码：


<!DOCTYPE html>
<html>
<head lang=\"en\">
    <  charset=\"UTF-8\">
    < ></ >
    <style>
        .box {
            width: 400px;
            margin:100px auto;
            border:1px solid #ccc;
        }
        .bottom div{
            width:100%;
            height: 300px;
            background-color: pink;
            display: none;
        }
        .purple {
            background-color: purple;
        }
        .bottom .show {
            display: block;
        }

    </style>
    < >
        window.  = function(){
            var btns = document.getElementsByTagName(\"button\");
            var divs = document.getElementById(\"divs\").getElementsByTagName(\"div\");
            for(var i= 0;i<btns.length;i++)
            {
                btns[i].index = i;  // 难点
                btns[i].  = function(){
                    //让所有的 btn 类名清空
                    //alert(this.index);
                    for(var j=0;j<btns.length;j++)
                    {
                        btns[j].className = \"\";
                        divs[j].className = \"\";
                    }
                    // 当前的那个按钮 的添加 类名
                    this.className = \"purple\";
                    //先隐藏下面所有的 div盒子
                    //留下中意的那个 跟点击的序号有关系的
                    divs[this.index].className = \"show\";
                }
            }
        }
    </ >
</head>
<body>
<div class=\"box\">
    <div class=\"top\">
        <button>第一个</button>
        <button>第二个</button>
        <button>第三个</button>
        <button>第四个</button>
        <button>第五个</button>
    </div>
    <div class=\"bottom\" id=\"divs\">
        <div class=\"show\">1好盒子</div>
        <div>2好盒子</div>
        <div>3好盒子</div>
        <div>4好盒子</div>
        <div>5好盒子</div>
    </div>
</div>

</body>
</html>

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章