CODEWITHSUNDEEP
jquery
Sal B
Sal B

Reputation: 540

jQuery Custom Tabs Switch Classes

Sorta got this working but trying to figure out the rest:

I have 2 tabs that, when clicked, should change styles based on the class .is-active. I have a if statement checking first to see if the tab has the class, then if it does it should leave it alone if clicked. If it doesnt have the class then it should add the class and remove it from the other tab that does have it.

$(function() {
  "use strict";

  // tabbed content
  $('.js-items-tabs .js-tab').click(function(e) {
    e.preventDefault();

    // check if has active class
    if ($(this).hasClass('is-active')) {
      // do nothing
      $(this).toggleClass('is-active');
    } else {
      $(this).toggleClass('is-active');
    }
  });

});
.tabs-container {
  background: white;
  position: relative;
  height: 58px
}
.tabs-container .tabs {
  text-transform: uppercase;
  overflow: hidden
}
.tabs-container .tabs a {
  text-decoration: none;
  font-size: 1.125rem;
  background: #e6e6e6;
  color: #636363;
  display: block;
  float: left;
  padding: 15px 40px;
  width: 40%;
  position: absolute;
  left: 50%;
  box-shadow: inset 1px -2px 10px 0 rgba(0, 0, 0, 0.2)
}
.tabs-container .tabs a.is-active {
  background: white;
  color: black;
  position: absolute;
  top: -10px;
  padding-top: 25px;
  box-shadow: none
}
.tabs-container .tabs a:hover {
  color: black
}
.tabs-container .tabs a.first {
  text-align: right;
  left: 0
}
@media screen and (max-width: 63.9375em) {
  .tabs-container .tabs a {
    font-size: 0.8125rem;
    padding: 15px 10px
  }
}
.tabs-title>a {
  background: #e6e6e6;
  color: #636363
}
.tabs-title>a[aria-selected="true"] {
  padding-top: 2rem
}
.tabs-title>a:hover,
.tabs-title>a:focus,
.tabs-title>a[aria-selected="true"] {
  background: white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="tabs-container">
  <div class="tabs js-items-tabs" data-tabs id="hiw-tabs">
    <a href="#solar-panels" aria-selected="true" class="js-tab is-active first">Home Solar Panels</a>
    <a href="#getting-started" class="js-tab">Getting Started With Sunnova</a>
  </div>
</section>

Upvotes: 1

Views: 189

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240878

You are only changing the class of the element that was clicked. You need to select the sibling elements as well (or at least select the elements with the class .is-active).

Since the elements are siblings, you could simplify this logic down to a single line:

$(this).toggleClass('is-active').siblings().removeClass('is-active');

If there always has to be at least one active element, just replace .toggleClass() with .addClass():

$(this).addClass('is-active').siblings().removeClass('is-active');

Updated Example:

$('.js-items-tabs .js-tab').on('click', function(e) {
  e.preventDefault();
  $(this).toggleClass('is-active').siblings().removeClass('is-active');
});
.is-active {
  color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="tabs-container">
  <div class="tabs js-items-tabs" data-tabs id="hiw-tabs">
    <a href="#solar-panels" aria-selected="true" class="js-tab is-active first">Home Solar Panels</a>
    <a href="#getting-started" class="js-tab">Getting Started With Sunnova</a>
  </div>
</section>

Upvotes: 1

Draco18s no longer trusts SE
Draco18s no longer trusts SE

Reputation: 15941

You need to find the current active tab, remove it from being active, then add the active status to the newly active tab.

$(function() {
  "use strict";

  $('.js-items-tabs .js-tab').click(function(e) {
    e.preventDefault();

    //remove active from currently active
    $('.is-active').removeClass('is-active');
    //add active to this
    $(this).addClass('is-active');
  });
});

Doesn't matter if you click on the active tab again, it will lose, and then immediately regain, the active status.

Upvotes: 1

Related Questions