jQuery tab check class isn't checking for class

Question

I have a problem with jQuery. When I click on a tab (a tag), it gets an "active" class. I want to check with jQuery or javascript, which tab is active, and when a specific tab gets the "active" class, I want to add and remove classes.

https://jedantest.000webhostapp.com/explore.html

It seems that the code is working, but the problem now is that I have to click twice on the nature tab.

But for some reason, the code provided above isn't working. on a side note, is it better to call IDs and classes directly, or store them in a variable and use them as a var?

$("#cultureExplore, #historyExplore, #natureExplore").click(function() {
  if ($('#natureExplore').hasClass('active')) {
    ('#footerExplore').addClass('footerExploreNature');
    ('#footerExplore').removeClass('footerExploreElse');
  } else {
    ('#footerExplore').addClass('footerExploreElse');
    ('#footerExplore').removeClass('footerExploreNature');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="tabs tab-demo z-depth-1 center-align row" style="overflow: hidden;">
  <li class="tab col s4 "><a id="cultureExplore" class="active" href="#culture">Culture</a></li>
  <li class="tab col s4"><a id="historyExplore" href="#history">History</a></li>
  <li class="tab col s4"><a id="natureExplore" href="#nature">Nature</a></li>
</ul>
footer

<footer id="footerExplore" class="page-footer hide-on-small-and-down footerExploreElse">
  .........
</footer>

Answer 1

You aren't referencing the elements correctly ('#footerExplore') should be $('#footerExplore') added test class to chow color change.

$("#cultureExplore, #historyExplore, #natureExplore").click(function() {
  if ($('#natureExplore').hasClass('active')) {
    ($('#footerExplore')).removeClass('footerExploreElse').addClass('footerExploreNature');        
  } else {        ($('#footerExplore')).removeClass('footerExploreNature').addClass('test');
  }
});

.footerExploreNature {
  color: green;
}

.footerExploreElse {
  color: red;
}

.test {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs tab-demo z-depth-1 center-align row" style="overflow: hidden;">
  <li class="tab col s4 "><a id="cultureExplore" class="active" href="#culture">Culture</a></li>
  <li class="tab col s4"><a id="historyExplore" href="#history">History</a></li>
  <li class="tab col s4"><a id="natureExplore" href="#nature">Nature</a></li>
</ul>
<footer id="footerExplore" class="page-footer hide-on-small-and-down footerExploreElse">
  .........
</footer>