B站学习的第一个blog HTML Javascript之tab栏切换（面包屑导航）

HTML Javascript之tab栏切换

下面是这个js要做的效果图

1. 第一步当然是写原生的html标签
2. 第二步做出静态效果
3. 最后实现事件监听

下面秀一下我写的效果吧（其他的可以慢慢根据需要写，我觉得应该不是很难）

话不多说，直接上代码

下面是html标签代码

        

            

                
商品介绍
                
规格与包装
                
售后保障
                
商品评价
                
本店热门
            
        
        

            
商品介绍模块内容
            
规格包装模块内容
            
售后保障模块内容
            
商品评价模块内容
            
本店热门模块内容
        
    

接下来当然是静态页面必备的css代码

ul{
            width: 469px;
            background: #F9F5F1;
            padding-left: 0px;
            padding-right: 0px;
            border-bottom: 3px solid indianred;
        }
        li{
            width: 90px;
            height: 30px;
            display: inline-block;
            line-height: 30px;
            text-align: center;
        }
        .current{
            background:#F94;
        }
        /*设置第一个div显示*/
        .item:first-child{
            display: block;
        }
        .item{
            width: 469px;
            height: 300px;
            border: 1px solid darkcyan;
            background: #F9F5F1;
            /*以下两行代码为了让文字垂直水平都居中*/
            line-height: 300px;
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            display: none;
        }

最后当然是js交互效果的代码

 var tab_list = document.querySelector('.tab_list');
        var lis = document.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for (var i = 0;i

提醒一下，注意css和js外面包裹的标签

最后的最后，为了方便查看，附上一个完整版的代码

    
    
    


    

        

            

                
商品介绍
                
规格与包装
                
售后保障
                
商品评价
                
本店热门
            
        
        

            
商品介绍模块内容
            
规格包装模块内容
            
售后保障模块内容
            
商品评价模块内容
            
本店热门模块内容
        
    
    

有何不足，敬请指正。