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

我解决了这个问题。我的图标样式覆盖了按钮的样式，这导致了问题。

如何在活动标签内更改图标字体的颜色？

2 个答案: