如何更改活動標簽的文本顏色？

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>