jq 实现切换菜单选中状态

落日映苍穹つ 2023-08-17 16:01 107阅读 0赞

点击导航菜单，切换选中状态

效果：

![1149706-20190922212835682-1951559906.png][]

![1149706-20190922212854725-133975539.png][]

![1149706-20190922212908756-1310738690.png][]

思路：首先获取选中的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代码

转载于:https://www.cnblogs.com/zxf100/p/11569388.html

[1149706-20190922212835682-1951559906.png]: /images/20230810/202523d5bdc343ef86e477c77cd26234.png
[1149706-20190922212854725-133975539.png]: /images/20230810/81bca6167975471eae0c8235f1482608.png
[1149706-20190922212908756-1310738690.png]: /images/20230810/9b743b29a1944561ae990767efc26ea0.png