title: How do I change active tab text color?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Can anyone help me how can I achieve it?</p>
  
  <p>Regards,
  Bill</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* 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();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="float-left"&gt;
    &lt;button id="grid" class="btn view-btn"&gt;&lt;i class="fas fa-th"&gt;&lt;/i&gt; Grid View&lt;/button&gt;
    &lt;button id="map" class="btn view-btn active"&gt; &lt;i class="fas fa-map-marker-alt"&gt;&lt;/i&gt; Map View&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="grid-view" class="gridView"&gt;
    &lt;p&gt;
      Hello 1
    &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="map-view" class="mapView"&gt;
    &lt;p&gt;
      Map view
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>