移动端固定定位的导航条如何实现图标和字体颜色切换?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

需求:单页应用,点击下方固定定位的导航条实现页面切换(我通过控制display:none/block实现页面切换,有更好的方法希望能告知我),并同时更换图标,改变图标下方字体的颜色!
screenshot
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>

展开
收起
小旋风柴进 2016-05-30 10:35:00 3577 0
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
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载