index.html

<!DOCTYPE html>
<html><head><!-- utf-8 英文字符集  --><meta charset="utf-8"> <!-- 让页面的宽度自动适应手机屏幕的宽度 --><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><link href="css/mui.min.css" rel="stylesheet" /><link rel="stylesheet" href="css/style.css"/><link rel="stylesheet" type="text/css" href="css/icons-extra.css"/><script src="js/mui.min.js"></script></head><body><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-search"></span><span class="mui-tab-label">发现</span></a><a class="mui-tab-item" href="c.html"><span class="mui-icon mui-icon-gear"></span><span class="mui-tab-label">我的</span></a></nav><script type="text/javascript">//mui初始化mui.init();// 子页面集合var subpages = ['a.html', 'b.html', 'c.html'];// 子页面样式var subpage_style = {top: '0px',bottom: '51px',scrollIndicator:'none',//当页面内容较多出现滚动条时,隐藏};// 记录展示结果集var aniShow = {};//1、创建子页面，首个选项卡页面显示，其它均隐藏；mui.plusReady(function() {// 获取自身var self = plus.webview.currentWebview();// 循环创建子页面for (var i = 0; i < subpages.length; i++) {var temp = {};// 创建子页面,create(url,id,styles)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);// console.log(JSON.stringify(aniShow));// aniShow输出{"a.html":"true"}}// 把子页面追加到自身self.append(sub);}});//当前激活选项,默认为第一个子页面var activeTab = subpages[0];//2、选项卡点击事件mui('.mui-bar-tab').on('tap', 'a', function(e) {// 获取当前点击tab的href属性var targetTab = this.getAttribute('href');// 当前子页面=激活的页面,不操作if (targetTab == activeTab) {return;}//1、显示目标选项卡//若为iOS平台或非首次显示(不是第一次显示)，则直接显示if (mui.os.ios || aniShow[targetTab]) {console.log(aniShow[targetTab]);//输出trueplus.webview.show(targetTab);} else {//第一次点击tab才显示//否则，使用fade-in动画，且保存变量var temp = {};temp[targetTab] = "true";// 合并对象mui.extend(aniShow, temp);console.log(JSON.stringify(aniShow));// aniShow输出 {"a.html":"true","b.html":"true"}// aniShow输出 {"a.html":"true","b.html":"true","c.html":"true"} plus.webview.show(targetTab, "fade-in", 300);}//2、隐藏当前;plus.webview.hide(activeTab);//3、更改当前活跃的选项卡activeTab = targetTab;});//3、退出系统时，默认还是加载初始化的页面，自定义事件，模拟点击“首页选项卡”document.addEventListener('gohome', function() {var defaultTab = document.getElementById("defaultTab");//模拟首页点击mui.trigger(defaultTab, 'tap');//切换选项卡高亮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>

a.html

<!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 rel="stylesheet" type="text/css" href="css/style.css"/></head><body><header class="mui-bar mui-bar-nav"><a class="mui-icon mui-icon-bars mui-pull-left"></a><a href="http://www.baidu.com" target="_blank"><div class="mui-input-row mui-search"><input type="search" class="mui-input-speech mui-input-clear" placeholder="搜索一下"></div></a></header><div class="mui-content"><a href="a-1.html"><button type="button">跳转</button></a></div><script src="js/mui.js"></script><script type="text/javascript">mui.init()</script></body></html>

a-1.html

<!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 rel= "stylesheet" href="css/style.css"/></head><body><!--/输入mheader--><header class="mui-bar mui-bar-nav"><a class="mui-active-back mui-icon mui-icon-left-nav mui-pull-left" href="d.html"></a><h1 class="mui-title">登录</h1></header><!-- mbody 快速创建内容区域 --><div class="mui-content"><!-- mform快速创建表单 --><div class="mui-input-group login-form lest-text起名"><div class="mui-input-row"><label>手机号</label><input type="text"  placeholder="请输入手机号"></div><div class="mui-input-row"><label>密码</label><input type="password" class=" mui-input-password" placeholder="请输入密码"></div></div><button class="btn-block" style="margin-top:30px;">登录</button><p class="login-bottom起名"><a href="retrieve.html"><button class="mui-btn-link mui-pull-left">忘记密码？</button></a><a href="register.html"><button class="mui-btn-link mui-pull-right">注册</button></a></p></div><!-- <div style="margin-top:44px;">这是内容</div> --><script src="js/mui.js"></script><!--/引入--><script src="js/castapp.js"></script><script type="text/javascript">//初始化ca.init(true);</script></body></html>

但是在模拟器中底部导航在子页面不会消失，有大佬能解答一下吗？

HTML子页面怎么让底部导航消失相关推荐

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )
文章目录一.BottomNavigationBar 底部导航栏二.PageView 滑动页面三.BottomNavigationBar 与 PageView 关联四.完整代码示例 1.核心导航 ...
在魅族、vivo手机下Amaze UI底部导航消失问题
在使用Amaze UI写手机页面的时候发现底部导航栏在魅族和vivo手机下不显示,但是点击底部导航的位置却可以触发事件,针对这个问题做下记录. 在查询过资料得知,魅族的手机是默认的浏览器不支持 ...
Android导航栏高斯模糊,iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果...
(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIIma ...
h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结
Aphorism grow in errors overview 最近在写一个移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面底部的导航条想到的实现方案: 通过 ...
IOS底部导航设置与页面多级跳转
以一个UINavigationController作为根视图控制器,然后通过pushViewController函数实现多级跳转,以及通过popViewControllerAnimated函数跳到上一 ...
php仿微信底部菜单,Android实现简单底部导航栏 Android仿微信滑动切换效果
Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...
android仿微信的activity平滑水平切换动画,Android实现简单底部导航栏 Android仿微信滑动切换效果...
Android实现简单底部导航栏 Android仿微信滑动切换效果发布时间:2020-10-09 19:48:00 来源:脚本之家阅读:96 作者:丶白泽 Android仿微信滑动切换最终实现效果 ...
android滑动菜单图标,Android实现简单底部导航栏 Android仿微信滑动切换效果
Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...
android 底部滑动效果怎么做,Android实现简单底部导航栏 Android仿微信滑动切换效果...
android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义view配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...

HTML子页面怎么让底部导航消失

index.html

a.html

a-1.html

但是在模拟器中底部导航在子页面不会消失，有大佬能解答一下吗？

HTML子页面怎么让底部导航消失相关推荐

最新文章

热门文章