mui横向滚动选项卡

最新推荐文章于 2023-07-16 19:06:01 发布

balidui8328

最新推荐文章于 2023-07-16 19:06:01 发布

阅读量408

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yyy251/p/11232100.html

版权

转自https://www.cnblogs.com/Dark-fire-liehuo/p/10429476.html

<!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>
        <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 mui-active">新闻</a>
            <a href="#m2" class="mui-control-item">政治</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 mui-active" id="m1">
            你好啊，
        </div>
        <div class="mui-control-content" 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>

转载于:https://www.cnblogs.com/yyy251/p/11232100.html

balidui8328

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mui横向滚动选项卡

转自https://www.cnblogs.com/Dark-fire-liehuo/p/10429476.html<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> ...
复制链接

扫一扫