Mui bottom of the home page click on the navigation bar to switch

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="css/mui.min.css">
        <style>
            html,
            body {
                background-color: #efeff4;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 id="title" class="mui-title">首页</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a id="defaultTab" class="mui-tab-item mui-active" href="a.html">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="b.html">
                <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
                <span class="mui-tab-label">消息</span>
            </a>
            <a class="mui-tab-item" href="c.html">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">通讯录</span>
            </a>
            <a class="mui-tab-item" href="d.html">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript" charset="utf-8">
             //mui初始化
            mui.init();
            var subpages = ['a.html', 'b.html', 'c.html', 'd.html'];
            var subpage_style = {
                top: '45px',
                bottom: '51px'
            };
            
            was aniShow = {};
            
             // create a sub-page, the first tab page display, other are hidden; 
            mui.plusReady (function () {
                 var Self = plus.webview.currentWebview ();
                 var tabLength = document.getElementsByClassName ( ' MUI-the Tab-Item ' ) .length;
                 for ( var I = 0 ; I <tabLength; I ++ ) {
                     var TEMP = {};
                     var Sub = plus.webview.create (subpages [I], subpages [I], subpage_style);
                     IF (I> 0 ) {
                        sub.hide();
                    }
                    else{
                        temp[subpages[i]] = "true";
                        mui.extend(aniShow,temp);
                        // {a.html:true}
                    }
                    self.append(sub);
                }
            });
             // currently active option 
            var activeTab subpages = [ 0 ];
             var title = document.getElementById ( " title " );
              // tab click event 
            MUI ( ' the .mui-bar-the Tab ' ) .on ( ' TAP ' , ' A ' , function (E) {
                 var targetTab = the this .getAttribute ( ' the href ' );
                 IF (targetTab == activeTab) {
                     return ;
                }
                // Replace the title 
                title.innerHTML = the this .querySelector ( ' the .mui-the Tab-label ' ) .innerHTML;
                 // display the Target tab
                 // If the iOS platform is first displayed or is displayed directly 
                IF (mui.os. || iOS aniShow [targetTab]) {
                    plus.webview.show(targetTab);
                } The else {
                     // Otherwise, the fade-in animation, and save variable 
                    var TEMP = {};
                    temp[targetTab] = "true";
                    mui.extend(aniShow,temp);
                    plus.webview.show(targetTab,"fade-in",300);
                }
                // hide the current; 
                plus.webview.hide (activeTab);
                 // change the current active tab 
                activeTab = targetTab;
            });
             // custom event simulation click on the "Home tab" 
            document.addEventListener ( ' GoHome ' , function () {
                 var defaultTab = document.getElementById ( " defaultTab " );
                 // analog home page click 
                mui.trigger (defaultTab, ' TAP ' );
                 // switch tab highlighted 
                var Current = document.querySelector ( " .mui-bar-tab> .mui-tab-item.mui-Active " );
                 IF ! (defaultTab == Current) {
                    current.classList.remove('mui-active');
                    defaultTab.classList.add('mui-active');
                }
            });
        </script>
    </body>

</html>
Mui bottom of the home page click on the navigation bar to switch

Guess you like
