使用js完成简单的切换标签功能

最新推荐文章于 2023-05-09 14:45:25 发布

YoungDoCui

最新推荐文章于 2023-05-09 14:45:25 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_19945487/article/details/111600417

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

使用js完成简单的切换标签页功能

1.话不多说，咱先上demo，写的比较随便，二三界面并没有完善，但是主要咱们看功能，在这里插入图片描述
我这里写的是手机项目，基本这种需求也就是手机界面比较常见，其实纯css也能实现上图中所有的动态效果，我之前写过一篇css切换标签页的文章，有需要的可以去看看，轮播图以后也会出一篇css与js的文章
2.首先css我不多说了，起名要有顺序关键的地方我在下面标注下
一共6张图片 3张点击前的 3张点击后的
三张点击前图片我的命名方式都是从1到3 方便for循环遍历到
三张点击后的图片也是如此但要和点击前的有区分符合命名规范方便遍历

   <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    /* 注意要符合手机端开发规范 使用vw vh rem单位 */
    body,
    html {
        width: 100%;
        font-size: 10px;
    }
    /* 设置相对定位 方便底部的固定定位 */
    body {
        position: relative;
    }
    /* 设置每个标签高占视图框100% */
    #tabcon {
        height: 100vw;
    }

    /* 第二个第三个界面隐藏掉 默认有第一个界面的 */
    #tabcon:nth-child(2),
    #tabcon:nth-child(3) {
        display: none;
    }


    /* 父相子绝 这里父是body，用固定定位定位到body最底部 */
    .footer_index {
        z-index: 1;
        position: fixed;
        bottom: 0;
        width: 100vw;
        height: 7vh;
        background-color: white;
        border-top: 1px solid #ddd
    }

    .footer_ul {
        width: 100vw;
        height: 100%;
        list-style: none;
        display: flex;
        justify-content: space-around;
        text-align: center;
        align-items: center;
    }
</style>

<body>
    <div id="tabcon">第一个界面</div>
    <div id="tabcon">第二个界面</div>
    <div id="tabcon">第三个界面</div>
    <footer class="footer_index">
        <ul class="footer_ul" id="ul_footer">
            <li class="tab">
                <img class="picb" src="../assets/image/01_check.png" alt="">
                <!-- 注意第一个默认点击的所以放入的是第二张图片（点击后的图片） -->
                <p>首页</p>
            </li>
            <li class="tab">
                <img class="picb" src="../assets/image/2_out.png" alt="">
                <p>订单</p>
            </li>
            <li class="tab">
                <img class="picb" src="../assets/image/3_out.png" alt="">
                <p>我的</p>
            </li>
        </ul>
    </footer>
</body>

在这里插入图片描述
完成的界面应该如上
3.js部分我列出来在代码中讲解

        var tab = function () {
            var tabli = document.getElementsByClassName("tab")
            // 根据class获取包含3个li的类数组 方便下面for遍历
            var imgblock = document.querySelectorAll(".picb")
            // 根据id获取3个图片的类数组 方便下面遍历修改
            var tabcon = document.querySelectorAll('#tabcon')
            // 根据id获取三个界面的类数组 方便for遍历修改
            for (var i = 0; i < tabli.length; i++) {
                // 首先遍历所有的tabli 也就是三个li
                tabli[i].index = i
                // 将此时的i保存起来放入到每个对应的li的方法中，这样每个li自身都存在它在执行时最初的i值了
                tabli[i].onclick = function () {
                    // 给每个li添加点击事件 点击时触发方法 执行
                    for (var i = 0; i < tabli.length; i++) {
                        // 函数体内遍历 所有li  是为了设置一个默认样式 全部没有点击的样式
                        imgblock[i].src = '../assets/image/' + `${i + 1}` + '_out.png'
                        // 排他思想：将所有的img的地址都设置为点击之前的图片 这里字符串拼接不讲了 但是注意我的i从0开始循环的 
                        // 但是图片和i要对应起来 图片要+1 比如遍历了li[0]、li[1]、li[2]三个  图片却是设置img[1],img[2],img[3]三个默认样式
                    }
                    imgblock[this.index].src = '../assets/image/0' + `${this.index + 1}` + '_check.png'
                    // 还记得我们上面保存的i吗，为什么要保存呢，因为函数体内的执行完毕了 最后的i肯定是3 拿过来完全没有意义啊，函数外的i咱又拿不进来
                    // 所以我们在设置点击事件的时候就保存下i this的意思是谁调用就指向谁，我们点击哪个按钮 对应的就是哪个按钮调用了函数 这里的this就
                    // 是对应的按钮，我们每个按钮还都在里面自定义了一个index方法，保存了每个页面i的值,想想：其中一个按钮点击了，这个按钮的i值被保存了
                    // 进入到了函数体内，然后你把所有的图片设置成了默认灰色，又把当前调用这个函数的按钮的i值拿过来了 当前按钮上的图片是不是可以设置
                    // 成你想要的样式 +1的原因和上面一样 现在你点击任何按钮都是全部恢复默认 把你点击的按钮变成你想要的图片
                    for (var j = 0; j < tabli.length; j++) {
                        // 界面的道理和上面相似 先遍历 
                        tabcon[j].style.display = 'none'
                        // 将所有的界面都隐藏
                    }
                    tabcon[this.index].style.display = 'block'
                    // 设置处于点击按钮上的页面为block
                }
            }

        }
        tab()
        // 执行

到此为止，界面功能就实现了。
由于经验不足，文章难免有错误，望理解或评论告知我，方便我修改，防止误导他人，谢谢！

点击查看github源码

YoungDoCui

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用js完成简单的切换标签功能

使用js完成简单的切换标签页功能1.话不多说，咱先上demo，写的比较随便，二三界面并没有完善，但是主要咱们看功能，我这里写的是手机项目，基本这种需求也就是手机界面比较常见，其实纯css也能实现上图中所有的动态效果，我之前写过一篇css切换标签页的文章，有需要的可以去看看，轮播图以后也会出一篇css与js的文章2.首先css我不多说了，起名要有顺序关键的地方我在下面标注下一共6张图片 3张点击前的 3张点击后的三张点击前图片我的命名方式都是从1到3 方便for循环遍历到三张点击后的图片也是如此
复制链接

扫一扫

专栏目录