<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="utf-8"?/>
????????<title>TAB測試</title>
????????<link?rel="stylesheet"?>
????????<style?type="text/css">
????????????*?{
????????????????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;
????????????}
????????</style>
????</head>
????<body>
????????<div?class="box">
????????????<ul?class="swiperTab">
????????????????<li>?<span>TAB-01</span>?</li>
????????????????<li>?<span>TAB-02</span>?</li>
????????????????<li>?<span>TAB-03</span>?</li>
????????????</ul>
????????????<div?class="swiper-container">
????????????????<div?class="swiper-wrapper">
????????????????????<div?class="swiper-slide">111111111111111</div>
????????????????????<div?class="swiper-slide">222222222222222</div>
????????????????????<div?class="swiper-slide">333333333333333</div>
????????????????</div>
????????????</div>
????????</div>
????????<script?src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
????????<script?src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
????????<script?type="text/javascript">
????????????function?tabs(obj,?swiperObj,?className,?index)?{
????????????????var?tabSwiper?=?new?Swiper(swiperObj,?{
????????????????????initialSlide:?index,?//?設定初始化時slide的索引
????????????????????speed:?500,?//滑動速度，單位ms
????????????????????autoHeight:?true,?//高度隨內容變化
????????????????????onSlideChangeStart:?function()?{
????????????????????????if?(tabSwiper)?{
????????????????????????????/*判斷tabSwiper是否存在，否則當哈希值不為0的時候會報錯?*/
????????????????????????????$(obj?+?"."?+?className).removeClass(className);?/*有當前類名的刪除類名,給下一個添加當前類名*/
????????????????????????????$(obj).eq(tabSwiper.activeIndex).addClass(className);?/*activeIndex是過渡后的slide索引*/
????????????????????????}
????????????????????}
????????????????});
????????????????//?模擬點擊事件，如果是移入事件，將mousedown?改為?mouseenter
????????????????$(obj).on('touchstart?mousedown',?function(e)?{
????????????????????e.preventDefault();/*清除默認事件*/
????????????????????$(obj?+?"."?+?className).removeClass(className);
????????????????????$(this).addClass(className);/*點擊當前導航?改變當前樣式*/
????????????????????tabSwiper.slideTo($(this).index());/*滑動到對應的滑塊*/
????????????????????
????????????????});
????????????????$(obj).click(function(e)?{
????????????????????e.preventDefault();/*清除默認點擊事件*/
????????????????});
????????????}
????????</script>
????????<script>
????????????/*swiper選項卡切換*/
????????????var?i=$(this).index();
????????????$(function()?{
????????????????//swiperTab?是你導航的className,active是你當前狀態的className
????????????????$('.swiperTab?>?li').eq(0).addClass('active');
????????????????tabs('.swiperTab?>?li',?'.swiper-container',?'active');
????????????});
????????</script>
????</body>
</html>
基于swiper做的tab，滑動切換時tab欄無法一起切換
Forever丶前端
2019-03-11 14:29:44