如何更改活动标签的文本颜色？

Question

我已经使用JS制作了标签，但无法添加活动的标签文字颜色。所以我想要一个活动的标签文本颜色。

我已经添加了悬停颜色，但似乎无法实现活动文本颜色。请注意，我只是在寻找活动文本，而不是更改整个标签的颜色。

谁能帮助我实现目标？

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