mui底部导航栏点击切换图片和颜色

来源：互联网发布：老梁观世界知乎编辑：程序博客网时间：2024/06/05 07:55

效果图：

代码直接粘贴的，其实都差不多：

其实在我不会用jquery。js之前，我觉得这个非常难做，但是现在用多了，觉得它非常实用。

$('.footer>a').on('tap',function(){//点击$(this).children().css('color','#e9af29');//点击的那个变黄色$(this).siblings().children().css('color','#adaeaa');//同胞的变灰色var n=$(this).index();//点击的index值console.log(n+'....');if(n==0){//                                 局部刷新var home=plus.webview.getWebviewById('tab-home.html');//获取需要刷新的页面mui.fire(home,'home');//自定义一个函数（获取刷新的页面只要监听home，然后实现想要实现的功能就行）// alert(home);}else if(n==1){var category=plus.webview.getWebviewById('tab-category.html');mui.fire(category,'category');// alert(JSON.stringify(category));}else if(n==3){var cart=plus.webview.getWebviewById('tab-cart.html')mui.fire(cart,'cart');// alert(JSON.stringify(cart));}else if(n==4){var me=plus.webview.getWebviewById('tab-me.html')mui.fire(me,'me');// alert(JSON.stringify(me));}//分别是改变图片的地方，跟颜色一样，同胞变其他灰色图片，自个变黄色if(n=='0'){// plus.webview.getWebviewById('tab-home.html').reload();$('.a1').attr('src','img/home.png');$('.a2').attr('src','img/category.png');$('.a3').attr('src','img/cart.png');$('.a4').attr('src','img/mine.png');}if(n=='1'){/*plus.webview.getWebviewById('tab-category.html').reload();*/$('.a1').attr('src','img/home1.png');$('.a2').attr('src','img/fenlei.png');$('.a3').attr('src','img/cart.png');$('.a4').attr('src','img/mine.png');}if(n=='3'){// plus.webview.getWebviewById('tab-cart.html').reload();$('.a1').attr('src','img/home1.png');$('.a2').attr('src','img/category.png');$('.a3').attr('src','img/shop.png');$('.a4').attr('src','img/mine.png');}if(n=='4'){// plus.webview.getWebviewById('tab-me.html').reload();$('.a1').attr('src','img/home1.png');$('.a2').attr('src','img/category.png');$('.a3').attr('src','img/cart.png');$('.a4').attr('src','img/mine1.png');}});

（本博主只是一个初学的菜鸟--Anguler，希望能够帮助到需要的人，如果有不正确的地方希望多多包涵和欢迎随时提出来，一起进步）

0 0