Question

我一直在做一个学校项目，我刚遇到了一个问题。我从W3获得了两个不同的东西 - 粘性导航栏，以及在单个页面上具有不同选项卡的功能，这样所有信息都可以以更简洁的方式呈现。问题是，当我尝试将两者同时合并时，除非我决定在它们上方插入边距，否则标签也无法从顶部移动，这也移动了导航栏。我认为问题在于导航栏是粘性的，所以我无法移动它，但我不知道为什么标签不能低于导航栏。

Stack Overflow is yelling at me because it says I need code to insert a jsfiddle link, so here's my 'code.'

可以访问小提琴here。

（另外，如果有人能弄清楚导致文字出现的功能为什么不起作用，我也会很感激。）

谢谢！

Answer 1

您需要在固定top: 0px;上添加ul，然后您才能在.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。

使用导航栏+页面选项卡格式化问题

1 个答案: