JavaScript dom基础篇之标签选择器

系统管理员 2021-11-22 15:08 190阅读 0赞

![20190725131628925.png][] ![20190725131635979.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTgzNDA5_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    <style type="text/css">
        .content{
            display: none;
            width: 200px;
            height: 200px;
            border: 2px solid red;
        }
        .active{
    
        }
    </style>
    </head>
    <body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    
    <div class="warpper">
    <div class="content" >hehe</div>
    <div class="content">haha</div>
    <div class="content">heihei</div>
    </div>
    <script type="text/javascript">
        var btn = document.getElementsByTagName('button');
        var div= document.getElementsByClassName('content');
        for(var i=0;i<btn.length;i++){ //循环给每一个按钮绑定一个事件
            (function (n) {
                btn[i].onclick = function () {
                    for(var j=0;j<div.length;j++){
                        btn[j].className="";//使全部按钮的样式为空
                        div[j].style.display="none";
                    }
                    this.className="active";//给当前按钮设置一个active样式
                    div[n].style.display="block";
                 
                }
        }(i))
        }
    </script>
    
    </body>
    </html>

[20190725131628925.png]: https://img-blog.csdnimg.cn/20190725131628925.png
[20190725131635979.png]: https://img-blog.csdnimg.cn/20190725131635979.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTgzNDA5_size_16_color_FFFFFF_t_70]: /images/20211122/b4625e95e7f643dabc287d1ee3690fef.png