尝试将活动类添加到所选标签中的第一个标签。

我的代码是将活动类添加到幻灯片1的第一个元素中,并完全按照我在滑块1中的要求进行操作,但是当我更改选项卡时,它仍将活动类添加到第一个滑块而不是其中的滑块2的导航中视图。

JS

$(document).ready(function(){
var $slideshow = $(".slider").slick({
    dots: false,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    adaptiveHeight: true,
    swipeToSlide: true,
    touchThreshold: 3,
    arrows: false

});


$('.links').on('click', 'a', function( e ) {

    var slideIndex = $(this).closest('li').index();

    $slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );

    $('.links li a').removeClass('slick-current');

      $(this).addClass('slick-current');

    e.preventDefault();

});

//Re draw slider when data tabs change
  $('[data-tabs]').on('change.zf.tabs', function() {

      $('.slider').slick("setPosition", 0);
      $('.slider').slick("slickGoTo", 0);
});


$('.slider').on('afterChange', function(event,slick,i){

  $('.links li a').removeClass('slick-current');

    $('.links li a').eq(i).addClass('slick-current');

});

  // document ready

$('.links li a').eq(0).addClass('slick-current');


});


的HTML

 <div class="sidebar-nav">
   <ul class="tabs vertical" id="example-vert-tabs" data-tabs>
     <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
     <li class="tabs-title"><a href="#panel2v">Tab2</a></li>
   </ul>
 </div>

 <div class="tabs-panel is-active" id="panel1v">
    <div class="large-12 columns">

      <div class="large-3 columns page-content-left">

       <ul class="links">
          <li><a href="#">slide1</a></li>
          <li><a href="#">slide2</a></li>
          <li><a href="#">slide3</a></li>
       </ul>

      </div>
      <div id="" class="large-9 columns page-content-right">
        <section class="slider" id="slider1">

           <div class="slide">
           </div>
           <div class="slide">
           </div>
           <div class="slide">
           </div>

        </section>
      </div>
   </div>
 </div>

 <div class="tabs-panel" id="panel2v">
    <div class="large-12 columns">

      <div class="large-3 columns page-content-left">

       <ul class="links">
          <li><a href="#">slide1</a></li>
          <li><a href="#">slide2</a></li>
          <li><a href="#">slide3</a></li>
       </ul>

      </div>
      <div id="" class="large-9 columns page-content-right">
        <section class="slider" id="slider2">

           <div class="slide">
           </div>
           <div class="slide">
           </div>
           <div class="slide">
           </div>

        </section>
      </div>
   </div>
 </div>

最佳答案

您的问题是两个滑块都设置了侦听器。您必须分别创建每个滑块。我会说最简单的解决方案是创建一个处理所有这些的jQuery函数。

因此,对于您的HTML,必要的代码看起来应该是这样的(不是经过优化的,而是易于阅读的)

// create a new jQuery function
$.fn.extend({
  createTabSlider: function() {
    var $self = $(this)

    // $self is the tab, to get an element you DONT use $('something')
    // you use $self.find("something")

    var $slideshow = $self.find(".slider").slick({
      dots: false,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      adaptiveHeight: true,
      swipeToSlide: true,
      touchThreshold: 3,
      arrows: false
    })

    $self.find(".links").on("click", "a", function(e) {
      var slideIndex = $(this).closest("li").index()
      $slideshow.slick("slickGoTo", slideIndex)
    })

    $slideshow.on("afterChange", function(event, slick, i) {
      $self.find(".links li a").removeClass("slick-current")
      $self.find(".links li a").eq(i).addClass("slick-current")
    })

    $self.find(".links li a").eq(0).addClass("slick-current")

  }
})

// create a slider for each tab
$("#panel1v").createTabSlider()
$("#panel2v").createTabSlider()

关于javascript - 滑动滑块-将事件类添加到当前打开的基础选项卡中的第一个<a>,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45695455/

10-11 23:25
查看更多