zoukankan      html  css  js  c++  java
  • mui的底部导航栏(引用外部图片)

    <!-- 底部导航 -->
            <nav class="mui-bar mui-bar-tab">
                <a class="mui-tab-item mui-active" href="index" id="index">
                    <div><img src="../img/sy1-2.png" width="22px" style="margin-top: 4px;" /></div>
                    <span class="mui-tab-label">首页</span>
                </a>
                <a class="mui-tab-item " id="MyCourse">
                    <div><img src="../img/sy2-1.png" width="21px" style="margin-top: 4px;" /></div>
                    <span class="mui-tab-label">学习</span>
                </a>
                <a class="mui-tab-item" id="MyTest">
                    <div><img src="../img/sy3-1.png" width="24px" style="margin-top: 4px;" /></div>
                    <span class="mui-tab-label">考试</span>
                </a>
                <a class="mui-tab-item" id="Myhome">
                    <div><img src="../img/sy4-1.png" width="20px" style="margin-top: 4px;" /></div>
                    <span class="mui-tab-label">我的</span>
                </a>
            </nav>

    底部导航的跳转:

    window.onload = function() {
    
    
                //tap为mui封装的单击事件,可参考手势事件章节
                document.getElementById('index').addEventListener('tap', function() {
                    //打开关于页面
                    mui.openWindow({
                        url: '../index.html',
                        id: 'index'
                    });
                });
    
                //tap为mui封装的单击事件,可参考手势事件章节
                document.getElementById('MyCourse').addEventListener('tap', function() {
                    //打开关于页面
                    mui.openWindow({
                        url: './MyCourse.html',
                        id: 'MyCourse'
                    });
                });
    
    
                //tap为mui封装的单击事件,可参考手势事件章节
                document.getElementById('MyTest').addEventListener('tap', function() {
                    //打开关于页面
                    mui.openWindow({
                        url: './MyTest.html',
                        id: 'MyTest'
                    });
                });
                //tap为mui封装的单击事件,可参考手势事件章节
                document.getElementById('Myhome').addEventListener('tap', function() {
                    //打开关于页面
                    mui.openWindow({
                        url: './Myhome.html',
                        id: 'Myhome'
                    });
                });
            }
  • 相关阅读:
    python-套接字编程之udp
    python-套接字编程之tcp
    用脚本获取windows的mac地址
    电脑控制安卓手机(手机投屏)
    人体内脏分布图
    电子发票打印出来太大了,怎么办?
    局域网内搭建各部门文件共享
    樊登读书会:《善战者说:孙子兵法与取胜法则十二讲》
    健康饮食——百万教程
    减肥十律
  • 原文地址:https://www.cnblogs.com/baobaoa/p/10101998.html
Copyright © 2011-2022 走看看