导航栏 + 页面选项卡的格式问题
Formatting Issue With Navigation Bar + Page Tabs
我一直在做一个学校项目，我只是 运行 遇到了一个问题。我从 W3 得到了两个不同的东西——粘性导航栏，以及在单个页面上有不同选项卡的能力，这样所有的信息都可以以一种不那么混乱的方式呈现。问题是，当我尝试同时合并这两个选项卡时，选项卡无法从最顶部移动，除非我决定在它们上方插入边距，这也移动了导航栏。我觉得问题是导航栏是粘的，所以我不能移动它，但我不知道为什么标签不能低于导航栏。
Stack Overflow is yelling at me because it says I need code to insert a jsfiddle link, so here's my 'code.'
fiddle可以访问here.
（此外，如果有人能弄清楚为什么导致文本出现的函数不起作用，我也将不胜感激。）
谢谢！
您需要在固定的 ul 上添加 top: 0px;，然后您就可以将上边距添加到 .tab 元素，而无需导航栏跟随。此外，您的面板没有显示，因为您没有通过面板 ID。
改变这个：
<button class="tablinks" onclick="openTab(event, 'Caesar')">Caesar</button>
<button class="tablinks" onclick="openTab(event, 'Vigenere')">Vigenere</button>
对此：
<button class="tablinks" onclick="openTab(event, 'caesartab')">Caesar</button>
<button class="tablinks" onclick="openTab(event, 'vigeneretab')">Vigenere</button>
使用内联 JavaScript 处理程序 (onclick) 不是最佳做法，因此请尽可能避免使用它们。请参阅 this post 了解原因。
我一直在做一个学校项目，我只是 运行 遇到了一个问题。我从 W3 得到了两个不同的东西——粘性导航栏，以及在单个页面上有不同选项卡的能力，这样所有的信息都可以以一种不那么混乱的方式呈现。问题是，当我尝试同时合并这两个选项卡时，选项卡无法从最顶部移动，除非我决定在它们上方插入边距，这也移动了导航栏。我觉得问题是导航栏是粘的，所以我不能移动它，但我不知道为什么标签不能低于导航栏。
Stack Overflow is yelling at me because it says I need code to insert a jsfiddle link, so here's my 'code.'
fiddle可以访问here.
（此外，如果有人能弄清楚为什么导致文本出现的函数不起作用，我也将不胜感激。）
谢谢！
您需要在固定的 ul 上添加 top: 0px;，然后您就可以将上边距添加到 .tab 元素，而无需导航栏跟随。此外，您的面板没有显示，因为您没有通过面板 ID。
改变这个：
<button class="tablinks" onclick="openTab(event, 'Caesar')">Caesar</button>
<button class="tablinks" onclick="openTab(event, 'Vigenere')">Vigenere</button>
对此：
<button class="tablinks" onclick="openTab(event, 'caesartab')">Caesar</button>
<button class="tablinks" onclick="openTab(event, 'vigeneretab')">Vigenere</button>
使用内联 JavaScript 处理程序 (onclick) 不是最佳做法，因此请尽可能避免使用它们。请参阅 this post 了解原因。