给当前页或者跳转后页面的导航栏添加选中样式

最新推荐文章于 2020-06-04 15:00:02 发布

weixin_30947043

最新推荐文章于 2020-06-04 15:00:02 发布

阅读量156

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zrcassiel/p/10328885.html

本文介绍如何使用HTML和jQuery实现一个具有活动状态切换功能的底部导航栏。通过简单的HTML结构和jQuery代码，可以创建响应式的底部菜单，当用户点击不同的菜单项时，能够动态切换高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

 1 <!-- footer start -->
 2   <footer class="navbar">
 3     <div class="item active">
 4       <span class="iconfont icon-icon"></span>
 5       <p>首页</p>
 6     </div>
 7     <div class="item">
 8       <span class="iconfont icon-yansetianchong1"></span>
 9       <p>我</p>
10     </div>
11   </footer>
12   <!-- footer end -->

jquery:

1 // footer active
2       $(document).ready(function(){
3         $('footer > div').each(function(){
4           $(this).click(function(){
5             $('footer > div').removeClass('active');
6             $(this).addClass('active');
7           })
8         })
9       });