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

本贴最后更新于 974 天前,其中的信息可能已经时移世易

写在前面

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

无限进步。

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 193 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...