swiper切换做导航选中

swiper切换后上面的也选中
swiper：4.5.0

<ul class="top">
  <li class="active">公司新闻</li>
  <li class="">行业动态</li>
  <li class="">常见动态</li>
</ul>


<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide swiper-slide-active">公司新闻</div>
    <div class="swiper-slide">行业动态</div>
    <div class="swiper-slide">常见动态</div>
  </div>
</div>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

你好！机器人 2021-12-10 18:47

关注


<body>
    <ul class="top">
      <li class="active">公司新闻</li>
      <li class="">行业动态</li>
      <li class="">常见动态</li>
    </ul>
     
     
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-active">公司新闻</div>
        <div class="swiper-slide">行业动态</div>
        <div class="swiper-slide">常见动态</div>
      </div>
    </div>

    <!-- Swiper JS -->
    <script src="./swiper.js"></script>
    <script>
    var swiper = new Swiper('.swiper-container',{
        on:{
            transitionEnd: function(swiper,event){
                const index = swiper.activeIndex
                let dom = document.getElementsByClassName('top')[0].querySelectorAll('li')
                for(let i = 0;i<dom.length;i++){
                    dom[i].classList.remove("active")
                }
                dom[index].classList.add("active")
            },
          },
      });
    </script>
</body>