首页 > yabo亚博体育下载 > jq实现切换菜单选中状态

jq实现切换菜单选中状态

2019-09-23

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

效果:

?

?

?

?

??思路:首先获取选中的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

文章标签: