代码之家 › 专栏 › 技术社区 › Reilly Ford

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

uinavigationbar formatting css html javascript

Reilly Ford · 技术社区 · 6 年前

我一直在做一个学校项目,但我遇到了一个问题。我从W3得到了两个不同的东西——粘性导航栏,以及在一个页面上有不同选项卡的功能,这样所有信息都可以以一种不太混乱的方式呈现。问题是,当我试图同时合并这两个选项卡时,除非我决定在其上方插入一个边距,否则无法从顶部移动选项卡,这也会移动导航栏。我认为问题在于导航栏很粘,所以我无法移动它,但我不知道为什么标签不能低于导航栏。

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

可以访问小提琴 here 。

(另外,如果有人能找出导致文本出现的函数不起作用的原因,我也会很感激。)

非常感谢。

1 回复 | 直到 6 年前

BSK 6 年前

您需要添加 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 至于原因。