tab栏切换效果

<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">第一个li>
                <li>第二个li>
                <li>第三个li>
                <li>商品评价（666）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">
                商品评价（666）模块内容
            div>
            <div class="item">
                社区模块内容
            div>

        div>
    div>

<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个小li 设置索引号 
        lis[i].setAttribute('data-index', i);
        lis[i].onclick = function () {
            // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

            // 干掉所有人 其余的li清除 class 这个类
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            // 留下我自己 
            this.className = 'current';
            // 2. 下面的显示内容模块
            var index = this.getAttribute('data-index');
            // 干掉所有人 让其余的item 这些div 隐藏
            for (var i = 0; i < items.length; i++) {
                items[i].style.display = 'none';
            }
            // 留下我自己 让对应的item 显示出来
            items[index].style.display = 'block';
        }
    }
</script>