移动端固定定位的导航条如何实现图标和字体颜色切换？
需求：单页应用，点击下方固定定位的导航条实现页面切换（我通过控制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>
展开
收起
1
条回答
写回答
写回答
-
看你标签加了jquery，那么就理解成是用jquery来实现了
加入一个高亮后的css，比如叫active，分别是各个图标选中之后的效果然后：
$(function(){ $('.nav_link_ul li a').click(function(){ $(this).addClass('active'); $('.nav_link_ul li a').not(this).removeClass('active'); }); });2019-07-17 19:19:13赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
