Tab栏切换,,使用自定义属性,两次进行排他思想

tab栏切换的基本原理就是点击不同的导航栏时,下面盒子中的内容根据点击的模块不同而切换不同的内容,并且其他的内容隐藏;

第一步获取所有需要的节点;
第二步给上面的四个盒子循环添加点击事件,如果想实现下面的内容部分随着点击盒子的不同而显示不同的模块这个功能就需要给上面盒子添加自定义属性,这里命名为data-index,使用setAttribute属性添加,setAttribute(‘data-index’,i);跟随循环添加;
然后点击到哪个盒子,它的背景颜色就变成红色的,此时第一次使用排他思想,再利用for循环,先将其他的盒子背景颜色清空,当前点击的背景颜色变化;
第三步,获取到当前点击的盒子的index的值,再次使用排他思想 将其他的内容进行隐藏,然后和当前index值对应的内容显示;
需要注意的是,需要在css样式中先将所有的内容模块隐藏,只留下一个;
代码:

 var list = document.querySelector('.list').querySelectorAll('li'); //获取到所有list里面的li存入list伪数组中
        var con = document.querySelector('.con').querySelectorAll('li'); //获取所有con里面的li存入con伪数组中

        for (var i = 0; i < list.length; i++) { //遍历伪数组添加事件
            list[i].setAttribute('index', i); //给li添加自定义元素index
            list[i].onclick = function () { //定义函数处理事件
                for (var j = 0; j < list.length; j++) {
                    list[j].className = ''; //将类名清空
                }
                this.className = 'style_red'; //给当前的li添加类名
                // console.log(index);
                var index = this.getAttribute('index'); //获取当前index序列号;
                for (var m = 0; m < con.length; m++) { //设置所有的con里面的li隐藏
                    con[m].style.display = 'none';
                }
                con[index].style.display = 'block'; //当前的li显示
            }
        }

html结构:

 <div class="box">
        <div class="list">
            <ul>
                <li class="style_red">商品</li>
                <li>包装</li>
                <li>售后</li>
                <li>联系</li>
            </ul>
        </div>
        <div class="con">
            <ul>
                <li style="display: block;"> 商品信息1</li>
                <li> 包装信息2</li>
                <li> 售后信息3</li>
                <li> 联系信息4</li>
            </ul>
        </div>
    </div>

css结构:

 .box {
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid #000;
        }

        .list {
            width: 400px;
            height: 50px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .list ul li {
            list-style: none;
            width: 98px;
            text-align: center;
            float: left;
            border: 1px solid #000;
        }

        .style_red {
            background-color: red;
        }

        .con {
            width: 400px;
            height: 150px;
        }

        .con ul li {
            width: 200px;
            height: 20px;
            list-style: none;
            display: none;
        }

最终效果