mui選項卡可滑動
阿新 • • 發佈：2019-01-02
如圖：
引入的檔案可自己去mui官方網站下載（mui.min.css最好放在最前面，以免自己的樣式在前被mui自帶的樣式所覆蓋
a.html
a.css<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="divport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <link rel="stylesheet" href="JavaScript/MUI/css/mui.min.css"> <link rel="stylesheet" href="css/com.css"> <link rel="stylesheet" href="css/a.css"> <script src="JavaScript/rem_js/index.js"></script> <script src="JavaScript/rem_js/jquery.min.js"></script> <script src="JavaScript/MUI/js/mui.min.js"></script> <style> .mui-slider .mui-slider-group .mui-slider-item{ height: 14rem; } /* 更改當前樣式 */ .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{ color: #fff; text-decoration: none; border-bottom: none; background:#fb8792; } </style> </head> <body> <div class="mui-content"> <div class="big_wrapper"> <div class="mui-slider"> <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> <div class="top_nav"> <a class="mui-control-item mui-active" href="#item1"> <span>視訊</span> </a> <a class="mui-control-item" href="#item2"> <span>筆記</span> </a><a class="mui-control-item" href="#item3"> <span>作業</span> </a> </div> </div> <div class="mui-slider-group"> <!-- 一 --> <div id="item1" class="mui-slider-item mui-control-content mui-active" > <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <div class="class_box" > <div class="item"> <div class="index left">1</div> <div class="concent right"> <div class="cl_name">課程課程課程課程課程課程課程</div> <span>2018.10.3-15:30</span> </div> </div> <div class="item"> <div class="index left">2</div> <div class="concent right"> <div class="cl_name">課程課程課程課程課程課程課程</div> <span>2018.10.3-15:30</span> </div> </div> </div> </div> </div> </div> <!-- 二 --> <div id="item2" class="mui-slider-item mui-control-content "> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <div class="class_box" > <div class="item"> <div class="index left">3</div> <div class="concent right"> <div class="cl_name">課程課程課程課程課程課程課程</div> <span>2018.10.3-15:30</span> </div> </div> <div class="item"> <div class="index left">4</div> <div class="concent right"> <div class="cl_name">課程課程課程課程課程課程課程</div> <span>2018.10.3-15:30</span> </div> </div> </div> </div> </div> </div> <!-- 三 --> <div id="item3" class="mui-slider-item mui-control-content"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <div class="class_box" > <div class="item"> <div class="index left">5</div> <div class="concent right"> <div class="cl_name">課程課程課程課程課程課程課程</div> <span>2018.10.3-15:30</span> </div> </div> <div class="item"> <div class="index left">6</div> <div class="concent right"> <div class="cl_name">課程課程課程課程課程課程課程</div> <span>2018.10.3-15:30</span> </div> </div> </div> </div> </div> </div> <!-- 三 --> </div> </div> </div> </div> </body> <script> mui.init(); (function($) { $('.mui-scroll-wrapper').scroll({ bounce: false, indicators: true, //是否顯示滾動條 }); })(mui); </script> </html>
/* 頂部導航 */ .top_nav{ display: block; height:1.375rem; line-height: 1.375rem; font-size: 0.48rem; width: 100%; background: rgb(224, 224, 224); margin-bottom: 0.3125rem; } .top_nav a{ text-decoration: none; } .top_nav span{ height: 100%; line-height: 1.375rem; text-align: center; } .class_box{ width: 100%; padding: 0 0.3125rem; background: #FFF; } .item{ width: 100%; height: 2rem; font-size: 0.4375rem; border-bottom: 1px solid #ccc; } .item:nth-child(even)>.index{ width: 10%; height: 100%; line-height: 2rem; text-align: center; background: blue; } .item:nth-child(odd)>.index{ width: 10%; height: 100%; line-height: 2rem; text-align: center; background: #fe5462; } .concent{ padding: 0.3rem; width: 90%; height: 100%; line-height: 0.75rem; } .concent span{ font-size: 0.375rem; }