mui实现底部导航栏切换子页面

doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/foot.css" rel="stylesheet" />
		<style type="text/css">
		.mui-bar .mui-tab-item {
		  color: black; /* 默认链接颜色 */
		}
		
		.mui-bar .mui-tab-item a:hover {
		  color: red; /* 鼠标悬停时的颜色 */
		}
		.mui-bar .mui-tab-item:active {
		
		  color: red;
		}
		
		.mui-bar .mui-tab-item a:visited {
		  color: red; /* 已访问链接的颜色 */
		}
		style>
	head>

	<body>
		
		  
	 	
		

		  <nav class="mui-bar mui-bar-tab">
		    <a id="defaultTab" href="index" class="mui-tab-item mui-active">
		      <span class="mui-icon mui-icon-home">span>
		      <span class="mui-tab-label">首页span>
		    a>
		    <a class="mui-tab-item" href="map">
		      <span class="mui-icon mui-icon-map">span>
		      <span class="mui-tab-label">地图span>
		    a>
		    <a class="mui-tab-item" href="orders">
		      <span class="mui-icon mui-icon-contact">span>
		      <span class="mui-tab-label">订单span>
		    a>
		    <a class="mui-tab-item" href="my">
		      <span class="mui-icon mui-icon-person">span>
		      <span class="mui-tab-label">我的span>
		    a>
		  nav>
		  
		  <div id="content">div>
		body>
		
		
		
		<script src="js/mui.js">script>
		
	
		<script type="text/javascript">
			//        // 第一步验证登录状态
				   
			// 		var defaultpage = "index.html";	// 定义默认选项卡子页面
					
			// 		// 定义所有子页面
			// 		var subpages = ['index.html', 'map.html', 'orders.html','my.html'];
					
			// 		// 页面加载完成后加载子页面
			// 		mui.plusReady(function(){
					
			// 			var current =  plus.webview.currentWebview();	//获取当前页面的窗口对象
						
			// 			// 加载所有子页面
			// 			for(var i =0;i
			// 				var sub = plus.webview.create(
			// 					subpages[i], 
			//                     subpages[i], 
			//                     {
			//                         top: '0px', 
			//                         bottom: '50px' 
			//                     }
			// 				);
			// 				// 除默认页面外,其他子页面隐藏
			// 				if(subpages[i] != defaultpage){
			// 					sub.hide();
			// 				}
			// 				current.append(sub);	// 子页面加入窗口对象
			// 			}
			// 		});
					
			// 		// 创建点击事件
			// 		mui("#foot_tab").on("click","a",function(e){
			// 			plus.webview.hide(defaultpage);		// 隐藏上一个子页面
			// 			plus.webview.show(this.id + ".html")	// 显示当前点击页面
			// 			defaultpage = this.id + ".html";	// 记录当前点击页面
			// 		})
			


// 2.将页面放入div
mui.plusReady(function () {
    mui('.mui-bar-tab').on('tap', 'a', function(e) {
        var index = this.getAttribute('href');
        var content = document.getElementById('content');
        while(content.firstChild) {
            content.removeChild(content.firstChild);
        }

        //打开新的页面
        mui.openWindow({
            url: index + '.html',
            id: index,
            styles: {
                top: '0px',
                bottom: '51px',
            },
            createNew: true,
            show: {
                autoShow: true
            },
            waiting: {
                autoShow: true
            },
            appendTo: '#content'
        });
        
      
    });

    // 手动触发一次首页的点击事件
    mui.trigger(document.getElementById('defaultTab'), 'tap');
});

		script>
	body>

html>

你可能感兴趣的:(html)