常用资源整理
公共区
头部区
banner区
底部区
公司简介
图片列表
图文列表
文章列表
视频播放
下载列表
问答列表
招贤纳士
联系我们
图片列表

image

<!--切换-->
    <div class="tabs tabs1">
        <li class="active"><a href="#" title="">高空作业车</a></li>
        <li><a href="#" title="">常用升降车</a></li>
        <li><a href="#" title="">常用升降车</a></li>
    </div>
    <div id="tabs-container1" class="swiper-container tabs-container">
        <div class="swiper-wrapper">

            <div class="swiper-slide">1111</div>
            <div class="swiper-slide">1111</div>
            <div class="swiper-slide">1111</div>
        </div>
     </div>
/* 切换 */
.tabs {height:44px; margin:-75px 0 0 200px; position:relative; margin-bottom:.25rem;}
/*.tabs li{flex:1; text-align:center;}*/
.tabs li{ display:inline-block; }
.tabs li a {display:block; line-height:44px; color:#fff; background:#363e45; font-size:16px; padding:0 25px;}
.tabs li.active a{ background:var(--main_color);}
.tabs-container  .swiper-slide{width:100%;overflow: hidden; box-sizing:border-box;}
var tabsSwiper1 = new Swiper('#tabs-container1', {
  speed: 500,
  autoHeight: true,
  on: {
  slideChangeTransitionStart: function() {
   $(".tabs1 .active").removeClass('active');
   $(".tabs1 li").eq(this.activeIndex).addClass('active');
   }
  }
 })
 $(".tabs1 li").on('click', function(e) {
  e.preventDefault()
  $(".tabs1 .active").removeClass('active')
  $(this).addClass('active')
  tabsSwiper1.slideTo($(this).index())
 });