Question

我在这里有一个与其他人类似的问题，但那些没有帮助，因为他们引用了列表链接，而这些不是列表。

我有一个水平滑动的网站。单击顶部的链接时，它们会根据滑动到的页面进行突出显示。但是，如果您使用左右导航箭头，则链接不会正确突出显示。它只是在最后一个被点击的链接上突出显示。如果有人能告诉我我做错了什么，我很想知道。即使正在使用导航箭头，我也希望突出显示正确的链接。

这是关于jsfiddle的脚本：http://jsfiddle.net/LD9YS/13/

这是我失败的尝试之一......（请不要试图弄清楚我在这里做了什么......我自己也不知道这一点）

$(".arrow-right").click(function(){
   prevA.removeClass("active");
   prevA = $(A[index]).addClass("active");
});

很明显，我没有第一个线索如何做到这一点，但至少我试了几次。我想展示更多我的尝试，但他们非常讨厌我甚至不记得我在那些方面做了什么。

有人可以帮忙吗？如果有人无法帮助解决这个问题，我准备放弃它。

Answer 1

你这样做

$('.arrow-left').on('click', function (e) {
    e.preventDefault();
    $('.tabs .active').prev().trigger('mousedown');
});

$('.arrow-right').on('click', function (e) {
    e.preventDefault();
    $('.tabs .active').next().trigger('mousedown');
});

FIDDLE

Answer 2

这适用于右箭头......

  $('.arrow-left').on('click', function(e){
    e.preventDefault()
    var current = $('.tabs').find('a.active').index();
      if(current!= $('.tabs').find('a:first').index()){
         $('.tabs a').removeClass('active');
          $('.tabs a').eq(current-1).addClass('active');
      }
    mySwiper.swipePrev()
  })

左箭头

相同

$('.arrow-right').on('click', function(e){
    e.preventDefault()
    var current = $('.tabs').find('a.active').index();
      if(current!= $('.tabs').find('a:last').index()){
         $('.tabs a').removeClass('active');
          $('.tabs a').eq(current+1).addClass('active');
      }
mySwiper.swipeNext()
})

Answer 3

这是你应该做的：

  $('.arrow-left').on('click', function(e){
    e.preventDefault();
    mySwiper.swipePrev();
    $(".tabs .active").removeClass('active');
    $($('.tabs a')[mySwiper.activeIndex]).addClass('active');
  })

  $('.arrow-right').on('click', function(e){
    e.preventDefault();
    mySwiper.swipeNext();
    $(".tabs .active").removeClass('active');
    $($('.tabs a')[mySwiper.activeIndex]).addClass('active');
  })

使用导航箭头时突出显示链接

3 个答案: