JavaScript—切换按钮

HTML

<ul class='footerBox'>
    <li class="active">
        <div><img src='img/8.png' width="100%"></div>
        <p class='p1'>首页</p>
    </li>
    <li>
        <div><img src='img/2.png' width="100%"></div>
        <p>工作履历</p>
    </li>
    <li>
        <div><img src='img/9.png' width="100%"></div>
        <p>用工评价</p>
    </li>
    <li>
        <div><img src='img/7.png' width="100%"></div>
        <p>我的</p>
    </li>
</ul>

CSS

.footerBox{
	width: 3.75rem;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	background: #f7f7f7;
	padding: 0.1rem 0.05rem;
	position: absolute;
	bottom:0;
}
.footerBox div{
	width:0.2rem;
	height:0.2rem;
}
.footerBox p{
	font-size: 0.12rem;
	margin-top: 0.1rem;
}
.footerBox li{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.footerBox .active *{color:red}

JS

var $x = document.querySelectorAll('.footerBox li');
for(var v of $x){
    v.onclick = function(){
        for(var m of $x){
            console.log(m)
            m.className=''
        }
    this.className='active'
    }
}