仅用js 实现 Tab栏切换效果

效果如图：

1、首先搭建结构（html）

tab栏切换 有2个大的模块：上面的模块选项卡（tab_list）、下面的模块内容（tab_con）

 
        
        
            
                商品介绍
                规格与包装
                售后保障

            
        
        
            
                商品介绍模块内容信息
            
            
                规格与包装模块内容
            
            
                售后保障模块内容
            


        
    

2、表现，即一些外观样式（css）

 
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 500px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    

3、行为，即一些交互效果（js）

 
        // 获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i