<!--
课程详情页面
type:page
记载方式：open
-->
<!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" />
<link href="css/edustyle.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>
<style>
.tino{
display:block;
border:1px solid red;
width:25px;
height:25px;
border-radius: 50%;
margin:0px;
padding:0px;
background:red;
color:#fff;
line-height: 25px;
}
</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 class="mui-title">知识和能力训练</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" 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" href="#item1mobile">
1
</a>
<a class="mui-control-item" href="#item2mobile">
<span class="tino">2</span>
</a>
<a class="mui-control-item" href="#item3mobile">
3
</a>
<a class="mui-control-item" href="#item4mobile">
4
</a>
<a class="mui-control-item" href="#item5mobile">
5
</a>
<a class="mui-control-item" href="#item6mobile">
6
</a>
</div>
</div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div class="mui-card">
<div class="mui-card-header">单选题</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
</div>
</div>
</div>
<div class="mui-card">
<ul class="mui-table-view mui-table-view-radio">
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 7
</li>
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 8
</li>
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 8
</li>
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 8
</li>
</ul>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-card">
<div class="mui-card-header">单选题2</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
</div>
</div>
</div>
<div class="mui-card">
<ul class="mui-table-view mui-table-view-radio">
<li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 5
</li>
<li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 6
</li>
</ul>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-card">
<div class="mui-card-header">单选2题</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
</div>
</div>
</div>
<ul class="mui-table-view mui-table-view-radio">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
A.都对
</a>
</li>
<li class="mui-table-view-cell mui-selected">
<a class="mui-navigate-right">
B.啥的叫法就开始
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
C.asdkfjasd
</a>
</li>
</ul>
</div>
</div>
<div id="item4mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第4个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-3
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-5
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-6
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-7
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-8
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-9
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-10
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-11
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-12
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-13
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-14
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-15
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-16
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-17
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-18
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-19
</li>
<li class="mui-table-view-cell">
第4个选项卡子项-20
</li>
</ul>
</div>
</div>
</div>
<div id="item5mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第5个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-3
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-5
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-6
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-7
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-8
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-9
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-10
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-11
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-12
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-13
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-14
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-15
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-16
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-17
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-18
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-19
</li>
<li class="mui-table-view-cell">
第5个选项卡子项-20
</li>
</ul>
</div>
</div>
</div>
<div id="item6mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第6个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-3
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-5
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-6
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-7
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-8
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-9
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-10
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-11
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-12
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-13
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-14
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-15
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-16
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-17
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-18
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-19
</li>
<li class="mui-table-view-cell">
第6个选项卡子项-20
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon iconfont icon-icon-shangyiti"></span>
<span class="mui-tab-label">上一题</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-icon-xiayiti"></span>
<span class="mui-tab-label">下一题</span>
</a>
</nav>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.pullToRefresh.js"></script>
<script src="js/mui.pullToRefresh.material.js"></script>
<script>
mui.init();
(function($) {
//阻尼系数
var deceleration = mui.os.ios?0.003:0.0009;
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration:deceleration
});
$.ready(function() {
//循环初始化所有下拉刷新，上拉加载。
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
$(pullRefreshEl).pullToRefresh({
down: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
self.endPullDownToRefresh();
}, 1000);
}
},
up: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.appendChild(createFragment(ul, index, 5));
self.endPullUpToRefresh();
}, 1000);
}
}
});
});
var createFragment = function(ul, index, count, reverse) {
var length = ul.querySelectorAll('li').length;
var fragment = document.createDocumentFragment();
var li;
for (var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
fragment.appendChild(li);
}
return fragment;
};
});
})(mui);
</script>
</body> </html>
请问如何点击下一题，让上面的题号和题干都切换到下一道题呢？用了很多方法都没用。
mui-active设置了，没效果。
2 个回复
painterguozs (作者)
//循环初始化所有下拉刷新，上拉加载。
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
$(pullRefreshEl).pullToRefresh({
down: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
self.endPullDownToRefresh();
}, 1000);
}
},
up: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.appendChild(createFragment(ul, index, 5));
self.endPullUpToRefresh();
}, 1000);
}
}
});
});
painterguozs (作者)
<!--
课程详情页面
type:page
记载方式：open
-->
<!doctype html>
<html>
</html>