mui中如何使用tab来切换子页面 mui-bar， mui-bar-tab

mui是前端框架但是很多人用它写移动端 那么mui底部切换是怎么做到的呢？

如何点击某个tab来切换不同的页面？

解答：

1首先我们需要引入mui框架的底部tab元素 代码如下

<!--table菜单开始-->
        <nav class="mui-bar mui-bar-tab">
            <a href="index.html" class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a href="hotspot.html" class="mui-tab-item">
                <span class="mui-icon mui-icon-paperplane"></span>
                <span class="mui-tab-label">热点</span>
            </a>
            
            <a href="message.html" class="mui-tab-item">
                <span class="mui-icon mui-icon-chat"></span>
                <span class="mui-tab-label">消息</span>
            </a>
            <a href="center.html" class="mui-tab-item" >
                <span class="mui-icon mui-icon-person"></span>
                <span class="mui-tab-label">我的</span>
            </a>
        </nav>

<!--table菜单结束-->

注意：每个a标签都要写目标路径的位置

接着就是js文件了

//mui加载框架元素成功之后执行此函数

mui.plusReady(function(){
               //四个页面的路径依次顺序排列
    var subpages=['index.html','hotspot.html','message.html','center.html'];
               //除了主页面其余页面的样式
               var subpage_style={
                   top:'0px',
                   bottom:'51px'
               }
               //主页面样式  底部不需要漏出来
               var index_style={
                   top:'0px',
                   bottom:'0px'
               }
               //获取当前第一个页面
               var activeTab=subpages[0];
               //给底部table 选项卡添加单机监听事件
           mui('.mui-bar-tab').on('tap','a',function(e){
               //获取目标路径
               var targetTab=this.getAttribute("href");
            //如果当前地址是index.html目标地址也是index.html
            if(targetTab==activeTab){
                   return ;
               }
            //获取当前窗口对象
               var self=plus.webview.currentWebview();
              //如果是第一个页面那么选择 第一个页面的样式 第一个页面底部有选项卡
              if(targetTab==subpages[0]){    
                  //主页面 index_style
              var sub=plus.webview.create(targetTab,targetTab,index_style);
              }else{
                  //主页面 其余页面的样式 subpage_style
              var sub=plus.webview.create(targetTab,targetTab,subpage_style);
               }
              //把子页面添加到当前窗口对象里
               self.append(sub);
               //关闭当前窗口里面已经展示的页面
               plus.webview.hide(activeTab);
               //要打开的页面赋值给当前页面留着下次使用
               activeTab=targetTab;
           })

}

这样就可以做到来回切换底部选项卡了