jq achieve switching menu selected

Click on the navigation menu, select the switching status

effect:

 

 

 

 

  Ideas: first get the selected URL, and then by the regular judge is the same, just the same with the corresponding attributes are not the same on the removal of the corresponding property.

html code

<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 " Music>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 Code

<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 " =
        as
        })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>