<!DOCTYPE html>
<html>
<head>
<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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.ready(function() {
mui(".mui-scroll").on("tap", ".mui-control-item", function() {
var target = $(event.target);
mui('.mui-slider').slider().gotoItem(target.index());
})
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
var index = event.detail.slideNumber
var defaultTab = $(".mui-scroll").children().get(index);
var mtap = $(".mui-scroll").children();
var len = $(".mui-scroll").children().length
if(index <= 4) {
mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
} else {
var mScrollx = 74 * (index - 4);
mui('.mui-scroll-wrapper').scroll().scrollTo(-mScrollx, 0, 100)
}
for(var i = 0; i < len; i++) {
if(i == index) {
defaultTab.classList.add("mui-active")
} else {
mtap.get(i).classList.remove("mui-active")
}
}
})
})
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item mui-active" value="zhaodong1">
推薦
</a>
<a id="item2" class="mui-control-item">
熱點
</a>
<a class="mui-control-item">
北京
</a>
<a class="mui-control-item">
社會
</a>
<a class="mui-control-item">
娛樂
</a>
<a class="mui-control-item">
科技
</a>
<a class="mui-control-item">
你好
</a>
</div>
</div>
<div class="mui-slider">
<div class="mui-slider-group">
<div id="item1" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第1個選項卡子項</li>
<li class="mui-table-view-cell">第1個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
</div>
</div>
</body>
</html>
