这是我的代码块，怎么在点击菜单的时候，图标icon触发background-position-x: -24px;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>hnbApp</title>
    <script src="js/mui.min.js"></script>
   <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <style>
    .mui-icon{
        background-image: url(images/hnb-icon.png);
        background-size: 200% auto;
    }
    
    .hnb-icon-shouye{
        background-position-y:-48px;
    }
    .hnb-icon-nonghd{
        background-position-y:-72px;
    }
    .hnb-icon-nongch{
        background-position-y:-96px;
    }
    .hnb-icon-nongzt{
        background-position-y:-120px;
    }            
    .hnb-icon-gengduo{
        background-position-y:-144px;
    }    
    .mui-bar-tab .mui-tab-item.mui-active{
        color: #46BC62;
    }
    .bg-on{
        background-position-x: -24px;
    }
    /*nav a .bg-on, nav a .bg-on:focus, nav a .bg-on:hover{
        background-position-x: -24px;
    }*/
    </style>
</head>
<body>

<!--固定底部导航栏-->
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon hnb-icon-shouye"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon hnb-icon-nonghd"></span>
        <span class="mui-tab-label">农荟答</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-find">
        <span class="mui-icon hnb-icon-nongch"></span>
        <span class="mui-tab-label">农场荟</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-me">
        <span class="mui-icon hnb-icon-nongzt"></span>
        <span class="mui-tab-label">农资团</span>
    </a>    
    <a class="mui-tab-item" href="#tabbar-with-me">
        <span class="mui-icon hnb-icon-gengduo"></span>
        <span class="mui-tab-label">更多</span>
    </a>        
</nav>
<script>
$(document).ready(function(){
   $("nav a").click(function(){
               $("span:first").addClass("bg-on").siblings().removeClass("bg-on");
      });
});

</script>
</body>
</html>

图片描述

阅读 4.2k

这是我的代码块，怎么在点击菜单的时候，图标icon触发background-position-x: -24px;

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

如何实现一个深拷贝函数？

快开发完的Vue3项目要做SEO该如何处理？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？