tab栏切换--纯js练习

最新推荐文章于 2023-09-19 10:11:21 发布

bug生产机器

最新推荐文章于 2023-09-19 10:11:21 发布

阅读量120

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_48472209/article/details/126859953

版权

模块切换思路

css

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tab{
            margin: 50px auto;
            text-align: center;
           width: 600px;
        }
        .tab_list{
            height: 50px;
        }
        .tab_list li{
            float: left;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        .tab_list .current{
            background-color: #c81623;
            color: aliceblue;
        }

        .item_info{
            padding: 20px 0 0 20px;
        }
        .item{
            display: none;
        }
    </style>

主页面

 <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规模与包装</li>
                <li>售后保障</li>
                <li>商品评家(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con" >
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规模包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价(50000)模块内容
            </div>
            <div class="item">
                50包邮
            </div>
        </div>

    </div>

js功能实现部分

 <script>
        var tab_list =document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        //for循环绑定事件
        for(var i = 0;i< lis.length;i++){
            //给5个item设置索引号
            lis[i].setAttribute('index',i);
            lis[i].onclick = function(){
                //上方选项卡 点击切换class类别
                //其余的li清除
                for(var i = 0;i < lis.length;i++){
                    lis[i].className = '';

                }
                //留下点击的
                this.className = 'current';
                //下面的显示模块
               var index = this.getAttribute('index');
               //清除掉未点击的div，使其隐藏
               for(var i = 0; i < items.length;i++){
                items[i].style.display = 'none'
               }
              items[index].style.display = 'block';
            }

        }
    </script>