h5底部导航栏图标切换

.footer_si{position: fixed;bottom: 0;width: 100%;height: 55px;background: #f5f5f5;overflow: hidden;}
.footer_si_box{width: 33%;text-align: center;margin-top: 8px;float: left;}
.footer_si_box img{width: 25px;height: 25px;}
.footer_si_box a{color: #999;text-decoration: none;}
.footer_si_box-now{color: #4729D1!important;}

<div class="footer_si">
    <div class="footer_si_box">
        <a href="#" class="footer_si_box-now">
            <img src="<?= Url::to('@web/images/surface/common1.png') ?>" alt="">
            <p>首页</p>
        </a>
    </div>
    <div class="footer_si_box">
        <a href="#">
            <img src="<?= Url::to('@web/images/surface/common31.png') ?>" alt="">
            <p>终端</p>
        </a>
    </div>
    <div class="footer_si_box">
        <a href="#">
            <img src="<?= Url::to('@web/images/surface/common21.png') ?>" alt="">
            <p>我的</p>
        </a>
    </div>
</div>