활성 탭 안의 아이콘 글꼴의 색상은 어떻게 변경합니까?

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"]을 사용했다. attribute selector

Answer 2

나는이 문제를 해결했다. 내 아이콘의 스타일링은 내가 버튼에 대해 가지고 있던 스타일을 무시하여 문제를 일으켰습니다.