移动端固定定位的导航条如何实现图标和字体颜色切换？

需求：单页应用，点击下方固定定位的导航条实现页面切换（我通过控制display:none/block实现页面切换，有更好的方法希望能告知我），并同时更换图标，改变图标下方字体的颜色！


html代码（如需优化请多多指正）：
<nav id="nav_link">

<ul class="nav_link_ul">
    <li><a id="homeLink"><p class="nav_pho" id="nav_pho1"></p>主页</a></li>
    <li><a id="taskLink"><p class="nav_pho" id="nav_pho2"></p>我的任务</a></li>
    <li><a id="messageLink"><p class="nav_pho" id="nav_pho3"></p>个人中心</a></li>
    <li><a id="userLink"><p class="nav_pho" id="nav_pho4"></p>个人中心</a></li>
</ul>

</nav>

---

看你标签加了jquery，那么就理解成是用jquery来实现了
加入一个高亮后的css，比如叫active，分别是各个图标选中之后的效果

然后：

$(function(){
    $('.nav_link_ul li a').click(function(){
        $(this).addClass('active');
        $('.nav_link_ul li a').not(this).removeClass('active');
    });
});