mui-选项卡+scroll滚动
详细操作见代码:
<!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>
具体效果如下: