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>

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>

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

1 个答案: