CODEWITHSUNDEEP
javascriptjqueryselecttabs
Nesta
Nesta

Reputation: 117

Add class active to tab button on selected menu option

I have the following tabs component:

<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>

And underneath it I have a select menu:

<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>

When you click on the tabs the respective select menu option changes. What I'm trying to achieve now is to add the class active to the tab buttons when its respective select menu option is chosen and obviously remove that class from the previous tab button.

This is the 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');
  });

I've tried to add $('.button').addClass('active'); like so:

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

However this adds the class active to every tab button chosen from the select menu.

Please see Demo here

Thank you for your help.

Upvotes: 0

Views: 1908

Answers (3)

Twisty
Twisty

Reputation: 30883

Consider the following code:

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

You already have the Click event setup, so no need to double your work.

Upvotes: 1

maxischl
maxischl

Reputation: 631

Native jQuery:

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

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

});

How it works: First: $('.button').removeClass('active') removes class active from all button-class elements. Second: $(this).prop('selectedIndex')-1 is the index of the selected element. That way, you add class active only to the exact one selected element.

Upvotes: 1

Alexandre Baux
Alexandre Baux

Reputation: 101

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

Upvotes: 1

Related Questions