如何在使用 HTML 导航选项卡加载页面时选择默认选项卡

Question

这是代码的链接。

网页导航选项卡

以及一些文档的链接(最后一个例子(

我希望默认情况下在

页面加载时选择第一个选项卡，如果可能的话，更改活动选项卡的文本颜色。

谢谢

Answer 1

默认选择第一个选项卡：您可以将第一个选项卡的div 的显示属性设置为块，将所有其他选项卡的显示属性设置为无。( <div id="London" class="w3-container city" style="display:block"> (因此，每当页面加载时，第一个选项卡的内容将始终可见。您可以相应地更改其他选项卡的显示属性，这已经在代码中实现。

更改活动选项卡文本颜色：单击特定添加时，您可以向其添加CSS颜色，该颜色具有使用Javascript指定的颜色规则。

如果这对您没有帮助，请在评论中告诉我。

Answer 2

这是第一个选项卡在 html 中需要的内容：

<a href="javascript:void(0)" onclick="openCity(event, 'London');">
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding w3-border-red">London</div>
    </a>

和

<div id="London" class="w3-container city" style="display:block">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
  </div>

如果要更改当前活动选项卡的颜色：

.w3-border-red, .w3-hover-border-red:hover {
    border-color: #e91e63!important;
    background-color: blue;
}