详细操作见代码：

<!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>

具体效果如下：

mui-选项卡+scroll滚动的更多相关文章

  1. ios中iframe的scroll滚动事件替代方法

    在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE h ...

  2. js中scroll滚动相关

    js中scroll滚动相关 scroll,滚动,一般讨论的是网页整体与浏览器之间的关系. 一.元素相关 属性/方法 解释 element.scrollHeight 返回元素的整体高度. element ...

  3. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

  4. MUI 选项卡切换+下拉刷新动态 完整实现一例

    前台最终呈现的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. 【jQuery】scroll 滚动到顶部

    Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...

  6. 【bug】—— ios scroll 滚动穿透

    BUG描述 在 ios 微信浏览器或原生浏览器中,主内容容器.content在文档流内,并且overflow-y: scroll.在其之上有一个 fixed 定位的弹出层.popUp,滚动.popUp ...

  7. scroll滚动到一定距离触发事件/返回顶部animate

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. mui 选项卡与header文字同步

    mui底部tab固定 头部nav可变 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. Mui 选项卡 tab 高度 没有自适应....

    因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是  用一个值 保存 当前 的 高度... 当 点击其他 t ...

随机推荐

  1. web框架开发-Django模型层(2)-多表操作

    很重要,都是精华 多表关系模型 一对一 一旦确定表关系是一对一,在两张表中的任意一张表中建立关联字段+Unique 一对多 一旦确定表关系是一对多,创建关联字段在多的表中 多对多 一旦确定表关系是多对 ...

  2. SQL SUM() 函数

    SUM() 函数 SUM 函数返回数值列的总数(总额). SQL SUM() 语法 SELECT SUM(column_name) FROM table_name SQL SUM() 实例 我们拥有下 ...

  3. C++笔记--std::相关

    std::packaged_task https://www.cnblogs.com/haippy/p/3279565.html https://en.cppreference.com/w/cpp/t ...

  4. The 16th Zhejiang provincial collegiate programming contest

    今天我挺有状态的,看过的题基本都给了正解(可能是昨晚cf div3打得跟屎一样,人品守恒,不好意思发题解了),自己也给队伍签了很多水题(不敢让队友写,怕出锅). 最后6题滚了,有点可惜.还差B和K没做 ...

  5. js语言规范_ES5-6-7_个人总结

    ## **理解ES** 1. 全称: ECMAScript 2. js语言的规范 3. 我们用的js是它的实现 4. js的组成   * ECMAScript(js基础)   * 扩展-->浏览 ...

  6. ASUS RT-AC68U 刷梅林固件及安装***插件记录（详细）

    本文借鉴网络并亲自刷机过程记录(网上很多教程都不太详细) 版本:华硕ASUS RT- AC68U    Wireless-AC1900 路由器的连接方式略,有说明书 连好后打开浏览器输入:http:/ ...

  7. [模板] 平衡树: Splay, 非旋Treap, 替罪羊树

    简介 二叉搜索树, 可以维护一个集合/序列, 同时维护节点的 \(size\), 因此可以支持 insert(v), delete(v), kth(p,k), rank(v)等操作. 另外, prev ...

  8. Flask 模型操作

    ORM 简称 ORM, O/RM, O/R Mapping 持久化模型 特征 数据表和编程类的映射 数据类型映射 字段属性映射类的属性和数据类型 关系映射 表于表之间的关系对应到 编程类的关系上 优点 ...

  9. intellij 操作

    默认快捷键 ctrl+alt+l 格式化代码 alt+insert代码自动生成 代码生成 编辑框右键>generator>选择

  10. Calendar 使用

    Calendar 类是一个抽象类,在java.util.Calendar包中,它为特定瞬间与一组诸如 YEAR.MONTH.DAY_OF_MONTH.HOUR 等 日历字段之间的转换提供了一些方法,并 ...