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，但这是一个更快但更糟的解决方案。

活动标签文字在启动时不会随页面加载而变化

1 个答案: