详细操作见代码：
<!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" />
</head> <body> <!--
mtab:快捷键
mui-segmented-control：多选项控制卡父级
mui-control-item：多选项卡子级
mui-active：选中状态
mui-control-content：每一个选项卡的具体内容，用id通过锚链接获取信息：列如href="#m1"
mui-segmented-control-inverted:背景颜色反转
mui-segmented-control-negative（posivite）:红色的
mui-segmented-control-vertical:选项卡竖着的 设置滚动效果：
mui-scroll-wrapper：滚动菜单父级
mui-scroll：滚动菜单子集
mui-slider-indicator：设置横向滚动效果，默认不写，纵向滚动效果
-->
<div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative mui-scroll-wrapper mui-slider-indicator"> <div class="mui-scroll">
<a href="#m1" class="mui-control-item">新闻</a>
<a href="#m2" class="mui-control-item mui-active">政治</a>
<a href="#m3" class="mui-control-item">娱乐</a>
<a href="#m4" class="mui-control-item">推荐</a>
<a href="#m5" class="mui-control-item ">健身</a>
<a href="#m6" class="mui-control-item">文学</a>
<a href="#m7" class="mui-control-item">天文</a>
<a href="#m8" class="mui-control-item ">地理</a>
<a href="#m9" class="mui-control-item">数学</a> </div>
</div> <div class="mui-control-content" id="m1">
你好啊，
</div>
<div class="mui-control-content mui-active" id="m2">
你在吗，
</div>
<div class="mui-control-content" id="m3">
你累吗，
</div> <div class="mui-control-content" id="m4">
你好啊，
</div>
<div class="mui-control-content " id="m5">
你在吗，
</div>
<div class="mui-control-content" id="m6">
你累吗，
</div>
<div class="mui-control-content" id="m7">
你好啊，
</div>
<div class="mui-control-content " id="m8">
你在吗，
</div>
<div class="mui-control-content" id="m9">
你累吗，
</div> <nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav> <script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body> </html>
具体效果如下：
