Javascript 如何在网站上实现持久的全局导航栏或菜单栏
所以我对html和css以及所有这些都是相当陌生的，我一直在练习制作一个虚拟网站，结果撞到了墙。它只是一个“公文包”网站，有三大类。该索引只是某种类型的登录页。我为页面内容制作了一个导航栏，我意识到每次点击导航栏中的一个项目时，整个页面都会加载，我试图让导航栏以某种方式粘住。我已经找到了如何做到这一点的方法，但我已经找到了所有页面的全局方法 我尝试使用iframes，因为我认为它只能装在容器内，但我无法让它工作。页面刚刚完全加载。也许iFrame有一种方法，但我读到它们很麻烦，我只是不知道如何使用它们，所以我放弃了它 下面是导航栏的一些代码和相应的CSS（如果有帮助的话）Javascript 如何在网站上实现持久的全局导航栏或菜单栏,javascript,php,html,css,Javascript,Php,Html,Css,所以我对html和css以及所有这些都是相当陌生的，我一直在练习制作一个虚拟网站，结果撞到了墙。它只是一个“公文包”网站，有三大类。该索引只是某种类型的登录页。我为页面内容制作了一个导航栏，我意识到每次点击导航栏中的一个项目时，整个页面都会加载，我试图让导航栏以某种方式粘住。我已经找到了如何做到这一点的方法，但我已经找到了所有页面的全局方法 我尝试使用iframes，因为我认为它只能装在容器内，但我无法让它工作。页面刚刚完全加载。也许iFrame有一种方法，但我读到它们很麻烦，我只是不知道如何使
正文{
背景：#ffffff；
字体系列：“proxima nova”，无衬线；
填充：0；
保证金：0；
}
.基站{
利润率：0.2%；
宽度：38%；
最大宽度：193px；
最小宽度：60px；
证明内容：周围的空间；
文本对齐：居中；
显示器：flex；
柔性包装：包装；
}
.btns.btn{
文字装饰：无；
背景#4f1e39；
宽度：24%；
最小宽度：60px；
最大宽度：80px；
颜色：#ffffff；
填充：4px0px；
保证金：4px0；
}
.btns.btn:悬停{
背景：#ffffff；
颜色：#4f1e39；
字体大小：粗体；
}
.btns.当前{
文字装饰：无；
背景：#ffffff；
宽度：24%；
最小宽度：60px；
最大宽度：80px；
颜色：#4f1e39；
填充：4px0px；
保证金：4px0；
字体大小：粗体；
}
.centerstuff{
宽度：自动；
背景色：#4fc5d6；
显示器：flex；
柔性包装：包装；
}
.迷你标识箱{
高度：35px；
}
.迷你标识盒img{
最大宽度：100%；
最大高度：100%；
填充：1px4px；
}因为您要离开呈现标题的页面，而这是一个静态html页面，所以代码不会保留。当您导航到新页面时，该html文件中的所有内容都将呈现，包括标题代码 您需要使用某种类型的动态库来呈现要加载的html，同时保持其余内容的灵活性。这离您现在正在进行的开发类型还有很长的一步 我建议使用类似于和的方法来实现这一点
然而，作为最后一点：你真的不需要担心这一点。大多数网页都是这样工作的，你的页面加载速度应该足够快，以至于你根本没有注意到它。只需在每个页面中包含标题代码，它就可以无处不在。这里有一个简单的显示和隐藏部分的想法，使用片段和css伪目标选择器。单击链接，显示并跳转到相应的部分
<html>
<head>
<style type='text/css'>
section {
display: none;
}
:target {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href='#about'>About</a></li>
<li><a href='#contact'>Contact</a></li>
</ul>
</nav>
<section id='about'>
All about me.
</section>
<section id='contact'>
Say hello.
</section>
</body>
</html>
部分{
显示：无；
}
：目标{
显示：块；
}
关于我的一切。
打个招呼。
（如果这是一个可访问性，请发表评论。如果没有足够的浏览器：目标支持，请提供备用/解决方法。）如果您不想离开当前页面，请查看PHP includes和/或AJAX。您可以将页面划分为多个部分，并在单击链接时使用“隐藏/显示”和“移动到相应的部分”。您可以为此使用片段链接。如果不是一点Javascript，也可以用CSS来完成。