简单实现mui-底部选项卡

我在看官方的mui文档的时候发现并没有找到选项卡的位置，所以我并没有采纳可能是我太笨了吧接触的还少，先说说我原先是如何写底部选项卡的

<nav class="mui-bar mui-bar-tab"> 
    <a class="mui-tab-item mui-active" href="pSMain.html">
	<span class="mui-icon "><img src="img/23.png"/></span>
	<span class="mui-tab-label"  >首页</span>
    </a>
    <a class="mui-tab-item" href="mbs.html">
	<span class="mui-icon "><img src="img/22.png"/></span>
	<span class="mui-tab-label"  >麦博士</span>
    </a>
    <a class="mui-tab-item" href="knowlage.html">
	<span class="mui-icon "><img src="img/24.png"/></span>
	<span class="mui-tab-label"  >知识库</span>
    </a>
    <a class="mui-tab-item" href="set.html">
	<span class="mui-icon "><img src="img/25.png"/></span>
	<span class="mui-tab-label"  >设置</span>
    </a>
</nav>

在底部选项卡的a标签里面写链接不管是模拟器还是手机是不能访问的所以我们给a标签加上id属性从而设置跳转另一个页面。

document.getElementById('a3').addEventListener('tap',function(){
	mui.openWindow({
  url : 'knowlage.html',
  id :'knowlage.html'
	})
});

这样填写是绝对没有问题的，但是不能达到我们想要的的结果，因为跳转之后我们发现跳转之后的页面底部选项卡消失了

在这里我不得不说一件非常愚蠢的事情，我不知道该如何写所以我一连写了四个页面，每个页面都设有跳往其他页面的连接，也就是说我每个页面写的都是几乎一样，然而我并不是要这种结果所以我接着尝试了其他的方法。

显示点击的页面，隐藏未点击的所有页面，这样就可以实现了当然预加载所有页面

最后我的实现代码如下

mui.init({
                           subpages:[{  
                              url:'pSMain.html',  
                              id:'pSMain.html',  
                              styles:{  
                                  top:'0px',  
                                  bottom:'50px'  
                              }  
                          }],  
              preloadPages:[{  
                      url:'mbs.html',  
                      id:'mbs.html',  
                      styles:{
                   top:'0px',
                   bottom:'50px'  
                      }  
                  },{  
                   url:'knowlage.html',  
                   id:'knowlage.html',  
                   styles:{  
                       top:'0px',  
                       bottom:'50px'  
                   }  
                  },{
                  	url:'set.html',
                  	id:'set.html',
                  	styles:{
                       top:'0px',
                       bottom:'50px'
                  	}
                  }] 
        	});
                document.getElementById('a1').addEventListener('tap',function(){
                    a1=plus.webview.getWebviewById("pSMain.html");  
                    a1.show();
                    a2.hide();
                    a3.hide();
                    a4.hide();
                })  
                document.getElementById('a2').addEventListener('tap',function(){
                    a2=plus.webview.getWebviewById("mbs.html");  
                    a2.show();
                })  
                document.getElementById('a3').addEventListener('tap',function(){
                    a3=plus.webview.getWebviewById("knowlage.html");  
                    a3.show();
                })  
                document.getElementById('a4').addEventListener('tap',function(){
                	a4=plus.webview.getWebviewById("set.html");
                	a4.show();
                })

这是js的部分，至于前面的我只是添加了一个id的属性值。

<nav class="mui-bar mui-bar-tab"> 
	<a class="mui-tab-item mui-active" id="a1">
		<span class="mui-icon "><img src="img/23.png"/></span>
		<span class="mui-tab-label"  >首页</span>
	</a>
	<a class="mui-tab-item" id="a2">
		<span class="mui-icon "><img src="img/22.png"/></span>
		<span class="mui-tab-label"  >麦博士</span>
	</a>
	<a class="mui-tab-item"id="a3">
		<span class="mui-icon "><img src="img/24.png"/></span>
		<span class="mui-tab-label"  >知识库</span>
	</a>
	<a class="mui-tab-item" id="a4">
		<span class="mui-icon "><img src="img/25.png"/></span>
		<span class="mui-tab-label"  >设置</span>
	</a>
</nav>