javascript - 如何更改活动选项卡文本颜色？

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>

标签： javascripthtmlcsstwitter-bootstrap

Answer 1

您只需要在显示和隐藏 div#grid和#map.

并添加一个.active带有背景颜色的 CSS 类（我已将其设置为background-color: red，但您可以将其更改为您想要的任何样式）

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