MUI 底部导航 （选中高亮改变icon）

底部导航栏应该是现在主流APP最常用的一种显示方式，我个人也觉得底部导航栏最清晰直观，一般以4-5个为宜。这里我做了点小东西，就是点击某个选项卡的时候，它自动高亮，并且改变icon，这样整体感觉就非常动感，比如信息选项卡，未点击的时候是一个封闭的信封，一点就变成打开的信封，要的就是这个效果。这里主要用到如下几种东西：【底部选项卡】，【外部icon引用】，【icon自动变换】，见代码和注释，上面的都是废话，一般的东西我都直接写在注释里，这样更加直观。

//html部分，底部五个选项卡，public-icon-style这种css都是本人自己的css，设置一些icon的样式，
//因为在MUI开发里，不管是自带icon还是外部引用的icon都是以字体样式来处理，比如颜色，color,
//大小，font-size,如果引用自带的icon非常简单，直接两个CSS:mui-icon和具体icon名称，但是有些时
//候一些特殊的业务需求，比如找不到你需要的icon，比如你想像我一样实现两个状态的icon动态切换，那
//就只能引用外部icon了，很简单，方法如下，百度搜：阿里矢量图，或者直接输入iconfont.cn/home，
//注册，搜索需要的icon然后，下载源代码，这时解压，我们需要两个文件，一个是iconfont.ttf文件，也
//就是icon的字体标准文件，放在我们font文件夹下面，还有一个iconfont.css文件，也就是我们下载的
//icon样式文件，放在css文件夹下面，里面有一段代码url('../fonts/iconfont.ttf?t=1533048640652')
// format('truetype'),地址改成刚才font文件夹下，其实你做一个项目，直接在阿里矢量网站建一个
//项目，每次找icon都直接加入购物车，然后下载源代码，这样每次去下载好的文件，解压覆盖即可
<nav class="mui-bar mui-bar-tab public-white-bg">
	    <a id="defaultTab" class="mui-tab-item mui-active" href="html/home.html">
	        <span class="mui-icon iconfont icon-shouye2 public-icon-style" id="home"></span>
	        <span class="mui-tab-label public-icon-style" id="hometa">首页</span>
	    </a>
	    <a class="mui-tab-item" href="html/message.html">
	        <span class="mui-icon iconfont icon-icon-xinfeng" id="message"><span style="display: none;" class="mui-badge" >1</span></span>
	        <span class="mui-tab-label" id="messageta">信息</span>
	    </a>
	    <a class="mui-tab-item" href="html/bigdata.html">
	        <span class="mui-icon iconfont icon-data" id="bigdata"></span>
	        <span class="mui-tab-label" id="bigdatata">大数据</span>
	    </a>
	     <a class="mui-tab-item" href="html/find.html">