MUI 底部导航,选中后改变icon
首先去阿里巴巴矢量图标库下载想要的图标
然后修改图标的class名称,我这里是同一位置的线性和非线性的图标唯一区别是结尾是否带1,这样就可以通过js来截取或增加class名称的字符串来达到更改icon的目的
代码如下
var d=document.getElementById('defaultTab').childNodes[1];//上一次被选中的nav,若是第一次进入则默认为首页
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
let targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
d.className=d.className.slice(0,d.className.length-1); //修改上一次选中的class
d=this.childNodes[1]; //修改d指向本次选中的
d.className=d.className+'1'; //修改本次选中的class
。。。。。。。。