前端：点击底部导航切换图标文字

H5点击底部导航切换图标文字

 

html代码：

        

            
            福利
        
        

            
            书城
        
        

            
            我的
        
    

 随便写个样式，css代码：

.btm_group{
    position: fixed;
    width: 100%;
    height: 1rem;
    background-color: #00C1B3;
    bottom: 0rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.btm_group>div{
    display: flex;
    flex-direction:column;
    align-items: center;
    font-size: 0.26rem;
}
.btm_group>div>img{
    width: 0.50rem !important;
}
.btm_u{
    color: #FFFFFF;
}
.btm_s{
    color: #350cff;
}

js代码：

//底部导航切换
    $(".bbtn").click(function(e){
        //切换文字样式
        $(this).addClass("btm_s").siblings().removeClass("btm_s");
        var idx = $(this).attr('data-id');
        var nodes = $('.bbtn img');
        console.log(nodes);
        for(var i=0; i

如图：