移动端tab的样式改变

第一种：通过使用JS来增加或删除类名来达到可以切换tab的时候样式也跟着改变的效果！主要是增加和删除"active"这个类名，当选中一个tab的时候，这个tab的类名就多了“active”，其他tab没有

HTML:

    
    

         
                

                    
                    1
                
          

          
                

                    
                    2
                
         

         
                

                    
                    3
                
         
    

 

/* bottom tab的整体样式*/

#bottom {
    width: 100%;
    height: ;
    background-color: rgba(, , , );
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: ;
}


/* 没有选中之前的样式 */
.icon li {
    color: #000000;
    font-size: ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/*没有选中之前的icon样式*/
.1:before {
    width: ;
    height: ;
    display: block;
    content: '';
    margin: 0 auto;
    background-image: url(../icon/home_normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.2:before {
    width: ;
    height: ;
    display: block;
    content: '';
    margin: 0 auto;
    background-image: url(2_normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.3:before {
    width: ;
    height: ;
    display: block;
    content: '';
    margin: 0 auto;
    background-image: url(3_normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}



/* 选中之后 */
.active li{
    color: #ffffff;
    font-size: 0.1rem;
}
/*选中之后的icon样式*/
.active .home:before{
    background-image: url(1_press.png);
}
.active .chat:before{
    background-image: url(2_press.png);
}
.active .mine:before{
    background-image: url(3_press.png);
}

JS:

// tab切换样式
window.onload = function () {
    //根据类名获取全部按钮
    var arr = document.getElementsByClassName('icon');
    for (var i = 0; i < arr.length; i++) {
        //给全部按钮添加onclick事件
        arr[i].onclick = function () {
            console.log('点击' + this.id);
            //1.首先把所有按钮的选中状态去掉
            for (var j = 0; j < arr.length; j++) {
                arr[j].classList.remove('active');
            }
            //2.this是当前激活的按钮，为当前激活的按钮添加选中状态类名
            this.classList.add('active');
        }
    }
}

 

第二种：在vue文件中实现导航栏切换时，样式也随之改变