活动选项卡文本在启动时不随页面加载而变化

Question

我的标签文本颜色没有随着页面加载而改变。背景颜色随着默认活动选项卡的加载而变化，但文本保持相同颜色。

body {font-family: "Lato", sans-serif;}

ul.tab {
    list-style-type: none;
    margin: auto;
    padding: auto;
    overflow: hidden;
    border: 1px solid #ccc;
    color: #ffffff;
    float: center;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: #74cfff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ededed;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    color: #fff;
    background-color: #74CFFF;

}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;   
}

这是我的 java 脚本代码。

  <script>
    function openCity(evt, cityName) {
    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(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }

    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
</script>

这里是 HTML 代码。 Tab1 是默认选择的选项卡。所以它的颜色和文字应该改变。但没有按我的意愿工作。选定的选项卡背面颜色应为“#75cfff”，字体颜色为“#ffffff”。如果我选择其他选项卡而不是相同的第一个选项卡，则文本应更改为白色，并将颜色更改为“#75cfff”。

<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'tab1')" id="defaultOpen" >tab1 <img src="assets/images/infoico.png" width="20" height="20"></a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'tab2')">tab2 <img src="assets/images/infoico.png" width="20" height="20"></a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'tab3')">tab3 <img src="assets/images/infoico.png" width="20" height="20"></a></li>
                    </ul>

<div id="tab1" class="tabcontent">
    <div style="border-bottom: thin solid #f1f1f1;" >
    <p> tab1</p>
    </div>                              
</div>
<div id="tab2" class="tabcontent">
    <div style="border-bottom: thin solid #f1f1f1;" >
    <p> tab2</p>
    </div>                              
</div>
<div id="tab3" class="tabcontent">
    <div style="border-bottom: thin solid #f1f1f1;" >
    <p> tab3</p>
    </div>                              
</div>

Answer 1

问题在于css。 如果您在启动时检查 html 元素的状态，您会注意到

<a class="tablinks active" id="tab1" style="display: block;" onclick="openCity(event, 'tab1')" href="javascript:void(0)">tab1 <img width="20" height="20" src="assets/images/infoico.png"></a>

活动标签的样式不正确。

ul.tab li a 将颜色设置回相同的蓝色，因此文本不可读。 单击脚本中的元素后，链接再次失去焦点，因此设置文本的是.active css。但由于 css 规则 .active 的权重低于规则 ul.tab li a，因此除非元素保持焦点，否则您将永远无法获得颜色。

我会从 ul.tab li a 中删除颜色并为其使用单独的类，这样您就不会遇到 css 权重的问题。您可以改为添加 !important，但这是一种更快但更差的解决方案。