Notice: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472

Notice: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472
jQuery 实现点击选中改变当前样式 - 微码盒
!
也想出现在这里? 联系我们
广告位

jQuery 实现点击选中改变当前样式

在做网站时,有些栏目元素有选择性,当我们点击某个栏目时,它会显示出不同于其它的样式,而没有被点击的,就恢复正常样式。效果如下图:

怎么在自己做网站时,实现这样的点击后改变当前样式的效果呢?这就需要使用 JQUERY 代码了。以下是 JQUERY 实现点击选中改变当前样式代码。

  1. <script>
  2. $("#meau_nav>div").click(function(){
  3. var index = $(this).index();
  4. $(this).addClass("active").siblings().removeClass("active");
  5. $(".redpacket-con").eq(index).show().siblings(".redpacket-con").hide();
  6. });
  7. </script>

代码解释:

#meau_nav>div 是 id 名为 meau_nav 的父 DIV 下面的 DIV,它是被控制的对象;active 是样式类,需要在 CSS 里添加 active 的样式代码;当鼠标点击#meau_nav>div 的某一项时,就会自动添加 active 样式类,其它的 DIV 自动取消 active 样式类。这样就实现了点击后当前样式改变的效果了。

给TA打赏
共{{data.count}}人
人已打赏
前端学习

jQuery获取其他网页内容并插入到当前页面div或input

2024-9-17 11:46:09

前端学习

JS实现静态页面搜索并高亮显示的方法

2024-9-19 11:46:05

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索