【发布时间】：2017-03-24 15:58:49
【问题描述】：
【问题讨论】：
标签： html tabs navigation
【发布时间】：2017-03-24 15:58:49
【问题描述】：
默认选择第一个标签：
您可以将第一个选项卡的 div 的显示属性设置为块，并将所有其他选项卡的显示属性设置为无。（<div id="London" class="w3-container city" style="display:block">）因此，每当页面加载时，第一个选项卡的内容将始终可见。您可以相应地更改显示在代码中已经实现的其他选项卡的点击属性。
更改活动标签文本颜色： 单击特定添加时，您可以将 CSS 颜色添加到其中，其中使用 Javascript 指定颜色规则。
如果这对您没有帮助，请在 cmets 中告诉我。
【讨论】：
-
谢谢，第一个选项卡现在默认打开，但是选项卡标题下方显示的让您知道选择了哪个选项卡的行没有亮起。我不确定使用什么 CSS 来改变活动文本的颜色，我还想弄清楚如何为选项卡荧光笔使用十六进制颜色。代码使用 w3-border-orange。
-
@Veiss -> 代码中其实是w3-border-red。这是一个在 w3.css 样式表中定义的 CSS 类，它包含在如下代码中： (
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">) 。您可以查看此链接以获取有关代码中包含的样式表的更多详细信息，以获取您不了解的任何其他类的详细信息：[w3schools.com/w3css/3/w3.css] -
@Veiss -> 改变出现的线条颜色： - 你一定已经观察到线条是因为 CSS 类 -> w3-bottombar(border-底部：6px 实心#ccc）。因此，如果您想要更改特定活动选项卡的颜色，您可以在单击选项卡时选择另一个类。在代码中，他们添加了 CSS 类 - w3-border-red (border-color: #e91e63!important;)。所以无论你想要什么十六进制颜色，你都可以在类中指定它。我希望这有帮助。如果是，请接受此作为对您问题的回答。
-
编辑该样式表的最佳方法是什么？我正在考虑用不同的名称复制它并将其托管在我的网站上的某个地方，然后将链接 rel 更改为新样式表的链接。由于某些 FTP 权限问题或其他原因，我还无法上传 CSS 文件。我还尝试创建一个子主题并将 .w3-orange,.w3-hover-orange:hover{color:#ce6905!important;background-color:#ce6905!important} 放入其中，但这并没有改变，我想因为 w3 样式表优先于子主题中的自定义 CSS。
-
我也不确定如何将类添加到活动选项卡。那将是代码脚本区域的一部分，对吗？感谢您的帮助，我很快就会正式学习 CSS 和 HTML！
这是您在第一个选项卡中需要的 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;
}
【讨论】：
-
我希望它与 ontouchend 事件一起工作，而不是 onclick 不起作用