javascript - 这是我的代码块，怎么在点击菜单的时候，图标icon触发background-position-x: -24px;
本文介绍了javascript - 这是我的代码块，怎么在点击菜单的时候，图标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>
解决方案
$(document).ready(function(){
$("nav a").click(function(){
$(this).find("span:first").addClass("bg-on");
$(this).siblings().find("span:first").removeClass("bg-on") ;});
});
这篇关于javascript - 这是我的代码块，怎么在点击菜单的时候，图标icon触发background-position-x: -24px;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
