Javascript 启动时，活动选项卡文本不随页面加载而更改

“我的选项卡”文本颜色未随页面加载而更改。默认活动选项卡的背景颜色随加载而改变，但文本仍保持相同的颜色

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>

---

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

活动选项卡的样式设置不正确

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

---

我会删除ul.tab li a中的颜色，并为其使用单独的类，这样您就不会有css权重的问题。你可以加上！相反，这很重要，但这是一个更快但更糟糕的解决方案。

您的代码为我提供了错误信息。document.getElementByIdcityName.style.display，但CityName实际上没有id tab1、tab2、Tab3。我想你只需要用class=tabcontent进行除法，并传递这三个选项卡名称，因为idI在我的代码中已经有了，我忘了在这里发布。我用tabe内容更新我的问题。这只是一个特殊性问题。ul.tab li a比.active具有更高的特异性-因此第一个选择器的颜色定义“获胜”。使您的第二个选择器至少与第一个选择器一样特异。谢谢，使用更糟糕的解决方案没有问题，但效果很好。