我在index页面中写了底部选项卡，跳转至底部页面的第一个页面。
如何使我点击顶部选项卡的时候，底部选项卡依旧在。
<!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.min.css" rel="stylesheet" />
<script src="js/iconfont.js"></script>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
#movie_body {
background-color: #A3C9FF;
}
#ticket {
color: #FFFFFF;
}
#movie_list1 {
height: 100px;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<header id="movie_body" class="mui-bar mui-bar-nav">
<span class="mui-icon">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dianyingpiaoiocn"></use>
</svg>
</span>
<span id="ticket">
电影票
</span>
<a style="float:right;" href="address.html">
<span style="color: #FFFFFF;">
昆明市
</span>
<span class="mui-icon">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weizhi"></use>
</svg>
</span>
</a>
</header>
<div class="mui-content">
<div style="padding: 10px 10px;">
<div id="sliderSegmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="tab-movie_home.html" data-wid="tab-movie_home">影院热映</a>
<a class="mui-control-item" href="the_upcoming.html" data-wid="the_upcoming">即将上映</a>
</div>
</div>
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="images/movie1.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/movie2.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/movie3.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/movie4.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/movie4.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="images/movie1.jpg">
</a>
</div>
</div>
</div>
<!--<div>
<ul id="list" class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="#">
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dianshijucai"></use>
</svg>
</span>
<span class="mui-tab-label">电视剧</span>
</a>
</li>
</ul>
<div id="movie_list1" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item mui-active">
<img style="width: 80px;" src="images/ms1.jpg" />
</a>
<a class="mui-control-item">
<img style="width: 80px;" src="images/ms2.jpg" />
</a>
<a class="mui-control-item">
<img style="width: 80px;" src="images/ms3.jpg" />
</a>
<a class="mui-control-item">
<img style="width: 80px;" src="images/ms4.jpg" />
</a>
<a class="mui-control-item">
<img style="width: 80px;" src="images/ms5.jpg" />
</a>
<a class="mui-control-item">
<img style="width: 80px;" src="images/ms6.jpg" />
</a>
</div>
</div>-->
</div>
<script src="js/mui.min.js"></script>
<script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
var group = new webviewGroup("tab-movie_home.html", {
items: [{
id: "tab-movie_home", //这是子页1的路径
url: "tab-movie_home.html",
extras: {}
}, {
id: "the_upcoming", //这是子页2的路径
url: "the_upcoming.html",
extras: {}
}],
onChange: function(obj) {
var c = document.querySelector(".mui-control-item.mui-active");
if(c) {
c.classList.remove("mui-active");
}
document.querySelector(".mui-segmented-control .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
}
});
mui(".mui-segmented-control").on("tap", ".mui-control-item", function(e) {
var wid = this.getAttribute("data-wid");
group.switchTab(wid);
});
});
mui.back = function() {
var _self = plus.webview.currentWebview();
_self.close("auto");
}
</script>
</body>
</html>
0 个回复