Выделение ссылок при использовании навигационных стрелок

У меня есть вопрос, похожий на другие здесь, но они не помогли, потому что они ссылались на ссылки на списки, хотя это не списки.

У меня горизонтально скользящий сайт. Когда вы нажимаете на ссылки вверху, они выделяются в зависимости от того, на какую страницу они переходят. Однако, если вы используете левую и правую стрелки навигации, ссылки не выделяются должным образом. Он просто остается выделенным на последней ссылке, по которой щелкнули. Мне было интересно, может ли кто-нибудь показать мне, что я делаю неправильно. Я хочу, чтобы правильная ссылка была выделена, даже когда используются стрелки навигации.

Вот скрипт на jsfiddle: http://jsfiddle.net/LD9YS/13/

И вот одна из моих неудачных попыток... (пожалуйста, не пытайтесь понять, что я здесь делал... я сам понятия не имею об этом)

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

До боли очевидно, что я понятия не имею, как это сделать, но, по крайней мере, я сделал несколько попыток. Я хотел показать больше своих попыток, но они были настолько нелепы, что я даже не могу вспомнить, что я на них делал.

Может кто-нибудь помочь? Если кто-то не может помочь с этим, я готов просто отказаться от этого.


javascript jquery css sliding
person user2284703    schedule 01.07.2014    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Вы бы сделали это так

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

person adeneo    schedule 01.07.2014
comment
Работает отлично, но есть одна маленькая проблема. Когда он доходит до последней ссылки (страница 5), и вы продолжаете нажимать на нее, выделение продолжает повторяться, но страница остается на странице 5. Чтобы уточнить, я настроил его так, чтобы страницы не возвращались к началу страницы. первая страница. Я хочу, чтобы он остановился на 5. - person user2284703; 02.07.2014
comment
Ты жжешь! Настоящий профессионал, если я когда-либо видел. Спасибо большое! Работает как шарм. - person user2284703; 02.07.2014
comment
@user2284703 user2284703 - Я действительно изменил его, это кажется намного проще! - person adeneo; 02.07.2014
comment
Вы также можете легко объединить два обработчика, например: jsfiddle.net/LD9YS/18 - person adeneo; 02.07.2014

arrow_upward
0
arrow_downward

Вот что вы должны сделать:

  $('.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');
  })
person Nawed Khan    schedule 01.07.2014

arrow_upward
0
arrow_downward

Это будет работать для стрелки вправо...

  $('.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()
})
person luchosrock    schedule 01.07.2014
comment
Этот код просто испортил все мои страницы при его использовании. У меня есть каждый раздел (страница), отображающий iframe, но этот код просто превратил все это в маленькие iframe рядом друг с другом, все подряд на одной странице. Спасибо хоть. Цените время, чтобы помочь. - person user2284703; 02.07.2014
comment
@user2284703 user2284703 Возможно, я забыл включить ) в конце блока. Теперь я отредактировал его, но я рад, что вы нашли свой ответ. - person luchosrock; 02.07.2014