如何更改活動標簽內圖標字體的顏色？

Question

我正在嘗試使圖標的顏色在打開的活動選項卡中保持某種顏色，但無法正常工作。 我已經能夠使用p：active來使圖標在單擊時更改顏色，但是單擊完成后該顏色消失了。 我希望它在打開該選項卡時保持不變。

button.active僅適用於背景顏色，不適用於字體顏色。 誰能幫忙解決這個問題？ 我很茫然。

這是我所有的編碼：

/* Style the tab */
div.tab {
overflow: hidden;
border: 0px;
background-color: transparent;
text-align: center;
margin-left:auto;
margin-right:auto;
display:block;
}

/* Style the buttons inside the tab */
div.tab button {
background-color:transparent;
float: center;
border: none;
outline: none;
cursor: pointer;
min-width:100px;
transition: 0.3s;
font-size: 16px;
color:white;
text-transform: uppercase;
line-height:1;
margin: 2%;
height:31px;
font-weight:300;
}

/* Change background color of buttons on hover */
div.tab button > p:hover {
color:black;
}

/* Create an active/current tablink class */
div.tab button.active {
background-color:#F7941D;
color:white;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 0px;
border-top: none;
text-align:center;
}

而我的HTML：

<div id="USA" class="tabcontent" style="display: block;">
<img class="diagram" src="http://dev.legendpower.com/wp-content/uploads/2017/11/Diagram_usa.png" style="margin-bottom:2%;">
</div>

<div id="Canada" class="tabcontent" style="display: none;">
<img class="diagram" src="http://dev.legendpower.com/wp-content/uploads/2017/11/Diagram_can.png"style="margin-bottom:2%;">
</div>

<div class="tab" style="width:50%; height:50px;">
  <button class="tablinks active" onclick="openToggle(event, 'USA')" id="defaultOpen"><p class="icon-usa-flag-icon" id="defaultOpen"></p></button>
  <button class="tablinks" onclick="openToggle(event, 'Canada')"><p class="icon-canada-flag-icon-1"></p></button>
</div>

</div></div>

我正在使用的JS：

function openToggle(evt, ToggleName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(ToggleName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

Answer 1

您需要使用圖標類來定位p標簽並更改顏色，因此，代替這個：

div.tab button.active {
    background-color:#F7941D;
    color:white;
}

你應該做這個 ：

div.tab button.active {
    background-color:#F7941D;
}

div.tab button.active p[class|="icon"] {
    color:white;
}

我使用此屬性選擇器[class|="icon"]來定位所有圖標，因為它們全部以單詞icon開頭。 您可以閱讀有關屬性選擇器的更多信息

Answer 2

我解決了這個問題。 我的圖標樣式覆蓋了按鈕的樣式，這導致了問題。