mui的底部導航欄(引用外部圖片)
阿新 • • 發佈:2018-12-11
<!-- 底部導航 --> <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'
});
});
}