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;
           })

}

這樣就可以做到來回切換底部選項卡了