基于swiper做的tab，滑动切换时tab栏无法一起切换
TAB测试 * { margin: 0; padding: 0 } li { list-style: none } .box { margin: 50px auto; width: 800px } .swiperTab { display: flex; width: 100%; flex-direction: row; justify-content: center; align-items: center } .swiperTab li { display: flex; height: 48px; border-left: 1px solid #dfdfdf; background-color: #ddf8ff; cursor: pointer; flex: 1; flex-direction: row; justify-content: center; align-items: center } .swiperTab li:first-child { border-left: 1px solid transparent } .swiperTab li.active { background-color: #f60; color: #fff } .swiperTab li:nth-child(1).active { background-color: red; } .swiperTab li:nth-child(2).active { background-color: green; } .swiperTab li:nth-child(3).active { background-color: blue; } .swiper-slide { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px } .swiper-slide:nth-child(1) { height: 300px; background-color: red; } .swiper-slide:nth-child(2) { height: 300px; background-color: green } .swiper-slide:nth-child(3) { height: 300px; background-color: blue; }
111111111111111
222222222222222
333333333333333 |
免责声明：本内容仅代表回答会员见解不代表天盟观点，请谨慎对待。
版权声明：作者保留权利，不代表天盟立场。
|
|
|
|
|
|
|
|
天盟APP下载
