jq 实现切换菜单选中状态
程序员文章站
2022-04-15 15:58:32
点击导航菜单,切换选中状态 效果: 思路:首先获取选中的URL,再通过正则判断是否相同,相同就加上相应的属性,不相同就去除相应的属性。 html代码 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>
上一篇: 连续加班后的一些感想