MUI 底部导航,选中后改变icon

首先去阿里巴巴矢量图标库下载想要的图标

MUI 底部导航,选中后改变icon

然后修改图标的class名称,我这里是同一位置的线性和非线性的图标唯一区别是结尾是否带1,这样就可以通过js来截取或增加class名称的字符串来达到更改icon的目的

MUI 底部导航,选中后改变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
        。。。。。。。。