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

写在前面

学习 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

无限进步。