JavaScript实现Tab栏切换特效

<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li><!-- 默认选中第一个li，current是决定红底白字的样式的 -->
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;"><!-- 这个item是默认显示的，因为所有的item的display值都为none -->
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
 
        </div>
</div>

<script>
        // 业务需求：点击tab栏被点击的tab栏拥有不一样的样式，其下方的div也要跟着点击进行切换实现内容也跟着变动的效果
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var tabs = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('data-index', i);    // 给每个li添加一个data-index的自定义属性，值是它们自己在lis中的下标，这个值主要让我们判断我们当前点击的是哪个li从而帮助我们后续修改它对应的div的display值
            lis[i].onclick = function () {
                // 1.第一步，用排他思想先做出用户点击谁就给谁class属性赋值，注意其他没有被点击的都需要操作它们的class值为空，这就是干掉其他人留下我自己的排他思想
                for (var i = 0; i <lis.length; i++) {
                    lis[i].className = '';  // 用循环先将所有人（包括自己）的class类名为空
                }
                // 再单独给自己修改class类名即留下我自己
                this.className = 'current';  // current这个类名的CSS样式是已经写好了的
                
                // 然后上面的tab栏样式好了就要处理第二步就是点击谁就让其对应的下属div显示出来，其他没有被点击的就隐藏，这里主要是需要先知道用户点击的是谁，然后再给对象的div设置display为block即可。还是需用用排他思想来做哦
                // 第二步：根据点击修改div的display属性值
                var index = this.getAttribute('index'); // 获取当前被点击的li的index
                for (var i = 0; i < lis.length; i++) { // 用循环让每个item的display都为none即干掉所有人
                    tabs[i].style.display = 'none';
                }
                // 在tabs中锁定li的index对应的item单独将它的display值改成block即留下我自己
                tabs[index].style.display = 'block';
            }
        }
</script>