Добавить класс, активный к кнопке вкладки на выбранной опции меню

Question

У меня есть следующий компонент вкладок:

<a data-tab="tab-1" class="button active">Tab 1</a>
<a data-tab="tab-2" class="button">Tab 2</a>
<a data-tab="tab-3" class="button">Tab 3</a>

<div class="tab-content active" id="tab-1">Tab 1 content</div>
<div class="tab-content" id="tab-2">Tab 2 content</div>
<div class="tab-content" id="tab-3">Tab 3 content</div>

А под ним у меня есть меню выбора:

<select>
  <option>Please select</option>
  <option value="tab-1">Tab 1</option>
  <option value="tab-2">Tab 2</option>
  <option value="tab-3">Tab 3</option>
</select>

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

Это JS:

$('.button').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('.button').removeClass('active');
        $('.tab-content').removeClass('active');

        $(this).addClass('active');
    $("#" + tab_id).addClass('active');

    $('select').val($(this).data('tab')).change();
  })

  $("select").change(function () {
    $('.tab-content').removeClass('active');
    $('#' + $(this).val()).addClass('active');
  });

Я пытался добавить $('.button').addClass('active'); примерно так:

$("select").change(function () {
  $('.tab-content').removeClass('active');
  $('#' + $(this).val()).addClass('active');
  $('.button').addClass('active');
});

Однако это добавляет активный класс к каждая кнопка вкладки выбрана из меню выбора.

Пожалуйста, посмотрите Демо здесь

Спасибо за вашу помощь.

Answer 1

Native jQuery:

$("select").change(function () {

   $('.tab-content').removeClass('active');
   $('#' + $(this).val()).addClass('active');
   $('.button').removeClass('active');
   $('.button').eq($(this).prop('selectedIndex')-1).addClass('active');

});

Как это работает: Первое: $('.button').removeClass('active') удаляет активный класс из всех элементов класса кнопки. Второе: $(this).prop('selectedIndex')-1 - индекс выбранного элемента. Таким образом, вы добавляете класс active только к одному выбранному элементу.

Answer 2

Рассмотрим следующий код:

$(".button").click(function () {
  var tab_id = $(this).attr("data-tab");
  $(".button").removeClass("active");
  $(".tab-content").removeClass("active");
  $(this).addClass("active");
  $("#" + tab_id).addClass("active");
  $("select").val($(this).data("tab"));
});

$("select").change(function () {
  var target = $(this).val();
  $(".button[data-tab='" + target + "']").click();
});

У вас уже есть настройка события Click, поэтому нет необходимости удваивать вашу работу.

Answer 3

$("select").change(function () {
    $('.tab-content').removeClass('active');
    $('.button').removeClass('active');
    $('#' + $(this).val()).addClass('active');
    $('.button[data-tab="'+ $(this).val() +'"]').addClass('active');
});