移动端滑动选项卡

内层宽度超过50%；第二个覆盖第一个；

.departments .gradeA,.departments .gradeB{width: 100%; height: 100%; position: absolute;}
.departments .gradeA .list,.departments .gradeB .list{width: 100%; height: 100%; overflow: auto; }

.departments .gradeA{z-index: 1; background: #f0f0f0;}

.departments .gradeB{left: 50%; z-index: 2; background: #fff;}

 

.departments{width: 100%; height: 100%; position: fixed; font-size: .6rem;}
.departments .gradeA,.departments .gradeB{width: 100%; height: 100%; position: absolute;}
.departments .gradeA .list,.departments .gradeB .list{width: 100%; height: 100%; overflow: auto; }
.departments .gradeA .list li,.departments .gradeB .list li{width: 100%; height: 1.8rem; line-height: 1.8rem; }
.departments .gradeA{z-index: 1; background: #f0f0f0;}
.departments .gradeA .list li{text-indent: 1.6rem; border-bottom: 1px solid #ddd;}
.departments .gradeA .list .current{background: #fff; background: #fff url(../images/WeChatTriangle.png) no-repeat .6rem .7rem; background-size: .32rem .4rem;}
.departments .gradeA .list a{color: #222;}
.departments .gradeB{left: 50%; z-index: 2; background: #fff;}
.departments .gradeB .list li{text-indent: 1.3rem; border-bottom: 1px solid #fff;}
.departments .gradeB .list a{color: #666;}

<div class="departments">
            <div class="gradeA">
                <ul class="list">
                    <li class="current"><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                ul>
            div>
            <div class="gradeB">
                <ul class="list">
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                    <li><a href="">特色科室a>li>
                ul>
            div>
        div>

 

转载于:https://www.cnblogs.com/hellman/p/5530520.html