JavaScript简单的Tab栏导航——切换页面_tab栏切换js代码

作者：繁依Fanyi0 | 2024-02-08 14:05:12

踩

tab栏切换js代码

这是昨天的一个课堂练习，简单展示一下！做的是一个简单的页面交互效果，呈现一种内嵌效果。效果图如下：

首先直接看一下它的js代码吧，在不一样的皮囊里藏着千篇一律的灵魂，主要是要体会从中的for循坏绑定点击事件。


// 获取元素
    // var lis = document.querySelector('.tab_list').querySelectorAll('li');
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var contentBoxs = document.querySelectorAll('.contentBox');
    // for 循环绑定点击事件
    for (var i = 0; i < lis.length; i++) {
        // 开始给5个小li设置索引号 
        lis[i].setAttribute('index', i);
        // 1.上面的模块选项卡
        lis[i].onclick = function () {
            // 清除所有 其余的li清除 class 这个类
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            // 留下current盒子
            this.className = 'current';
            // 2.下面的显示内容模块
            var index = this.getAttribute('index');
            // console.log(index);
            // 清除所有 让其余的contentBox 这些div隐藏
            for (var j = 0; j < contentBoxs.length; j++) {
                contentBoxs[j].style.display = 'none';
            }
            // 清除之后 让对应的contentBox 显示出来
            contentBoxs[index].style.display = 'block';
        }
    }

布局和样式就直接放在一起了哈！


<style>
    body {
        width: 1410px;
        margin: 0 auto;
    }
    .tabBox {
        height: 60px;
        background: #f59f9f;
    }
    .tab_list {
        list-style: none;
        display: flex;
    }
    .tab_list li {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        background: #cdee71;
        max-width: 220px;
    }
    .tab_list li:hover {
        color: #e41e1e;
        background: #f59f9f;
    }
    .contentBox {
        width: 1410px;
        height: 500px;
        background: #c5d2e4;
        display: none;
    }
    .contentBox P {
        margin: 0;
        padding: 0;
    }
</style>
<body>
    <div class="tabBox">
        <ul class="tab_list">
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评论(5000+)</li>
            <li>手机社区</li>
        </ul>
    </div>
    <div class="allBoxes">
        <div class="contentBox">
            <p>我是商品介绍</p>
        </div>
        <div class="contentBox">
            <p>规格与包装</p>
        </div>
        <div class="contentBox">
            <p>售后保障</p>
        </div>
        <div class="contentBox">
            <p>商品评论</p>
        </div>
        <div class="contentBox">
            <p>手机社区</p>
        </div>
    </div>
</body>

感谢观看！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/69351