jq 实现切换菜单选中状态
时间:2019-09-22
本文章向大家介绍jq 实现切换菜单选中状态,主要包括jq 实现切换菜单选中状态使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
点击导航菜单,切换选中状态
效果:
思路:首先获取选中的URL,再通过正则判断是否相同,相同就加上相应的属性,不相同就去除相应的属性。
html代码
<div class="layui-container" style="padding: 0px; margin-top: 70px;"> <div class="layui-row footer-nav"> <div class="layui-col-xs2 layui-col-sm2 item"> <a href="{:url('/index/index/index')}"> <img src="/public/index/images/icon/home.png"> <div >首页</div> </a> </div> <div class="layui-col-xs2 layui-col-sm2 item"> <a href="{:url('/index/index/videos')}"> <img src="/public/index/images/icon/video.png"> <div>视频</div> </a> </div> <div class="layui-col-xs2 layui-col-sm2 item"> <a href="{:url('/index/index/music')}"> <img src="/public/index/images/icon/music.png"> <div>音乐</div> </a> </div> <div class="layui-col-xs2 layui-col-sm2 item"> <a href="{:url('/index/index/news')}"> <img src="/public/index/images/icon/new.png"> <div>动态</div> </a> </div> <div class="layui-col-xs2 layui-col-sm2 item"> <a href="{:url('/index/index/about')}"> <img src="/public/index/images/icon/about.png"> <div>关于</div> </a> </div> </div> </div> <style type="text/css"> .active{ color: red } </style>
JQ代码
<script type="text/javascript"> var url = location.href; $('.item > a').each(function () { pat = new RegExp('/index/index/index'); if (pat.test(url)){ $('.item>a').eq(0).addClass('active'); $('.item>a>img').eq(0).attr("src","/public/index/images/icon/home_selected.png"); } pat = new RegExp('/index/index/videos'); if (pat.test(url)){ $('.item>a').eq(0).removeClass('active'); $('.item>a').eq(1).addClass('active'); $('.item>a>img').eq(1).attr("src","/public/index/images/icon/video_selected.png"); } pat = new RegExp('/index/index/music'); if (pat.test(url)){ $('.item>a').eq(1).removeClass('active'); $('.item>a').eq(2).addClass('active'); $('.item>a>img').eq(2).attr("src","/public/index/images/icon/music_selected.png"); } pat = new RegExp('/index/index/news'); if (pat.test(url)){ $('.item>a').eq(2).removeClass('active'); $('.item>a').eq(3).addClass('active'); $('.item>a>img').eq(3).attr("src","/public/index/images/icon/new_selected.png"); } pat = new RegExp('/index/index/about'); if (pat.test(url)){ $('.item>a').eq(3).removeClass('active'); $('.item>a').eq(4).addClass('active'); $('.item>a>img').eq(4).attr("src","/public/index/images/icon/about_selected.png"); } }); </script>
原文地址:https://www.cnblogs.com/zxf100/p/11569388.html
- Z.ExtensionMethods 一个强大的开源扩展库
- 【干货】神经网络SRU
- AutoMapper 使用实践
- CTF---安全杂项入门第二题 A记录
- PyTorch(总)---PyTorch遇到令人迷人的BUG与记录
- 手把手带你进入TOP20的商超销售预测
- 【干货荟萃】机器学习&深度学习知识资料大全集(二)(论文/教程/代码/书籍/数据/课程等)
- 逆天通用水印扩展篇~新增剪贴板系列的功能和手动配置,卸除原基础不常用的功能
- 【专知-Java Deeplearning4j深度学习教程06】用卷积神经网络CNN进行图像分类
- 万恶的剪贴板==》为存储而生
- AdaBoost算法(R语言)
- CTF---Web入门第六题 因缺思汀的绕过
- 小案例(六):预测小偷行为(python)
- 小案例(五):销量预测(python)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LNMP架构应用实战—Nginx反向代理负载均衡配置
- python第六课——判断结构
- MySQL数据库入门——备份数据库
- python第七课——循环结构 while
- python第八课——random模块的使用
- python第九课——while死循环
- python第十课——循环结构收尾
- python第十二课——for in循环
- Linux系统实战——批量无人值守安装操作系统
- python第十三课——嵌套循环
- python第十四课--排序及自定义函数
- python第十四课--排序及自定义函数之案例一:选择排序
- python第十四课--排序及自定义函数之案例二:冒泡排序
- python第十四课--排序及自定义函数之自定义函数(案例一)
- python第十四课--排序及自定义函数之自定义函数(案例二)