JavaScript | 学习笔记 [2] Tab栏切换

教程
499 2

写在前面

学习JavaScript写到第二个实例,做个记录方便下次记忆。

实现思路

准备个比较简单的H5骨架,然后写JavaScript

  • 先获取两个重要元素:.tab_item.item
  • for循环给到data-index索引
  • tab_item 循环点击然后再次for循环排它
  • 给到tab_item点击后赋予背景颜色 #e3e3e3
  • 新建变量index等于当前点击的data-index索引号
  • for循环再次排它隐藏的元素
  • item的第index索引号的display改为block

H5+Css

<style>
    * {
        padding: 0;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }

    .box {
        width: 300px;
        height: 150px;
        margin: 100px auto;
        box-shadow: 0px 1px 12px rgb(0, 0, 0, .18);
        border-radius: 12px;
        border: 1px solid #000000;
        overflow: hidden;
    }

    .top {
        display: flex;
        height: 40px;
        box-shadow: 0px 5px 12px rgb(0, 0, 0, .33);
    }

    .tab_item {
        flex: 1 1 auto;
        text-align: center;
        line-height: 40px;
        background-color: #303F9F;
        color: #fff;
        font-size: 18px;
    }

    .item {
        font-size: 24px;
        text-align: center;
        line-height: 100px;
        font-weight: 700;
        color: rgb(0, 0, 0, .47);
    }
</style>

    <div class="box">
        <div class="top">
            <div class="tab_item">Name</div>
            <div class="tab_item">Email</div>
            <div class="tab_item">Donation</div>
        </div>
        <div class="buttom">
            <div class="item" style="display: block;">
                @Nice_4z1
            </div>
            <div class="item">
                Support@4z1.cn
            </div>
            <div class="item">
                Alipay:Nice@4z1.cn
            </div>
        </div>
    </div>

JavaScript部分

    <script>
        //思路方面
        var tab_t = document.querySelector('.top');//获取元素
        var tab_item = tab_t.querySelectorAll('.tab_item');//获取元素
        var item = document.querySelector('.buttom').querySelectorAll('.item')//获取元素
        for (let i = 0; i < tab_item.length; i++) {
            tab_item[i].setAttribute('data-index', i)//自定义属性
            tab_item[i].onclick = function () {
                for (let i = 0; i < tab_item.length; i++) {//for循环排它
                    tab_item[i].style.backgroundColor = '#303F9F';
                }
                this.style.backgroundColor = '#e3e3e3';//定义被点击的背景颜色
                var index = this.getAttribute('data-index')//索引=自定义属性
                for (let i = 0; i < item.length; i++) {
                    item[i].style.display = 'none';//第二次排它
                }
                item[index].style.display = 'block';//被点击的第index个的display属性=block/显示
            }
        }
    </script>

End

无限进步。

最后更新 2021-07-28
评论 ( 2 )
OωO
隐私评论
  1. 文章不错关注一下

    4个月前回复
    1. @头条新闻

      hahaha

      4个月前回复