CODEWITHSUNDEEP
javascriptjquerycsssliding
user2284703
user2284703

Reputation: 367

Highlighting Links while using nav arrows

I have a question similar to others on here but those didn't help because they referred to list links while these are not lists.

I have a horizontally sliding site. When you click the links at the top, they highlight according to what page it is sliding to. However, if you use the left and right nav arrows, the links don't highlight properly. It just stays highlightted on the last link that was clicked. I was wondeering if anyone could show me what I am doing wrong. I want the correct link to be highlighted even when the nav arrows are being used.

Here is the script on jsfiddle: http://jsfiddle.net/LD9YS/13/

And here is one of my failed attempts... (please don't try to figure out what I was doing here... I have no idea of this myself)

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

It's painfully obvious that I haven't the first clue how to do this but at least i gave it a few attempts. I wanted to show more of my attempts but they were so obsurd that I can not even remember what I had done on those.

Can someone please help? If someone can't help with this, Im ready to just give up on it.

Upvotes: 1

Views: 48

Answers (3)

luchosrock
luchosrock

Reputation: 708

This would work for right arrow...

  $('.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()
  })

The same for left arrow

$('.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()
})

Upvotes: 0

adeneo
adeneo

Reputation: 318182

You'd do that like so

$('.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

Upvotes: 3

Nawed Khan
Nawed Khan

Reputation: 4401

Here is what you should do:

  $('.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');
  })

Upvotes: 0

Related Questions