How do I change active tab text color?

Question

I have made a tab using JS but I'm unable to add active tab text color. So I want an active tab text color.

I have added the hover color already but I don't seem to achieve active text color. Please note that I'm only looking for active text not the whole tab color to be changed.

Can anyone help me how can I achieve it?

Regards, Bill

/* Grid View on Search Page */
$("#grid").click(function() {
  $("#grid-view").show();
  $("#map-view").hide();
});

/* Map View on Search Page */
$("#map").click(function() {
  $("#grid-view").hide();
  $("#map-view").show();
});

$("#grid").trigger("click");

/* More Filters Button Toggle */
$("#more-filters").click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $("#moreoptions").collapse("show");
  $("#more-filters").hide();
  $("#more-filters").parent().parent().hide();
});

/* Reset All Filters on Search Sidebar */
$("#reset_filter").click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $("#reset_vehicle_form")[0].reset();
});

.view-btn {
  background: #FFF;
  color: #989898;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin: -13px 0px 2px 1px;
  padding: 4px 10px 4px 9px;
}

.filter-btn:active, .view-btn:active {
 color: rgb(0,0,0,.7);
 text-decoration: none;
}

.filter-btn:hover,
.view-btn:hover {
  color: rgb(0, 0, 0, .7);
  text-decoration: none;
}

.view-btn:focus,
.filter-btn:focus {
  box-shadow: none;
  outline: 0!important;
  -webkit-box-shadow: none;
}

.gridView {
  display: none;
}

.mapView {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="float-left">
  <button id="grid" class="btn view-btn"><i class="fas fa-th"></i> Grid View</button>
  <button id="map" class="btn view-btn active"> <i class="fas fa-map-marker-alt"></i> Map View</button>
</div>

<div id="grid-view" class="gridView">
  <p>
    Hello 1
  </p>
</div>

<div id="map-view" class="mapView">
  <p>
    Map view
  </p>
</div>

Answer 1

You just needed to add and remove an 'active' class as well at the same time as you are showing and hiding the divs #grid and #map.

And also add an .active CSS class with a background colour (i have set it to background-color: red, but you can change it to whatever style you would like)

/* Grid View on Search Page */
$("#grid").click(function() {
  $("#grid-view").show();
  $("#map-view").hide();
  $("#grid").addClass('active');
  $("#map").removeClass('active');
});

/* Map View on Search Page */
$("#map").click(function() {
  $("#grid-view").hide();
  $("#map-view").show();
  $("#map").addClass('active');
  $("#grid").removeClass('active');
});

$("#grid").trigger("click");

/* More Filters Button Toggle */
$("#more-filters").click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $("#moreoptions").collapse("show");
  $("#more-filters").hide();
  $("#more-filters").parent().parent().hide();
});

/* Reset All Filters on Search Sidebar */
$("#reset_filter").click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $("#reset_vehicle_form")[0].reset();
});

.view-btn {
  background: #FFF;
  color: #989898;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin: -13px 0px 2px 1px;
  padding: 4px 10px 4px 9px;
}

.view-btn.active {
  background-color: red;
  color: white;
}

.filter-btn:hover,
.view-btn:hover {
  color: rgb(0, 0, 0, .7);
  text-decoration: none;
}

.view-btn:focus,
.filter-btn:focus {
  box-shadow: none;
  outline: 0!important;
  -webkit-box-shadow: none;
}

.gridView {
  display: none;
}

.mapView {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="float-left">
  <button id="grid" class="btn view-btn"><i class="fas fa-th"></i> Grid View</button>
  <button id="map" class="btn view-btn active"> <i class="fas fa-map-marker-alt"></i> Map View</button>
</div>

<div id="grid-view" class="gridView">
  <p>
    Hello 1
  </p>
</div>

<div id="map-view" class="mapView">
  <p>
    Map view
  </p>
</div>