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>
<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>

<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>
<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>

var location.href;
$(
function () {
pat
new);
if (pat.test(url)){
$(
);
$(
);
}
pat
new);
if (pat.test(url)){
$(
);
$(
);
$(
);
}
pat
new);
if (pat.test(url)){
$(
);
$(
);
$(
);
}
pat
new);
if (pat.test(url)){
$(
);
$(
);
$(
);
}
pat
new);
if (pat.test(url)){
$(
);
$(
);
$(
);
}
});

 

» 本文来自:前端开发者 » 《jq 实现切换菜单选中状态_白峰_前端开发者》
» 本文链接地址:https://www.rokub.com/73315.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!