Javascript 如何在三个不同的菜单之间切换，并在加载新页面时保持最后选择的菜单打开？
我对javascipt、jquery、php基本一无所知……不幸的是，我只知道html和css。但是今年秋天我要开始上学了！问题是我现在真的在为客户制作一个页面。时间如此之短 我需要三个不同的菜单，它可以在它们之间切换，而不会在加载新页面时更改。我制作了一个模型，其中唯一可点击的是顶部的三个选项卡，以及所有三个菜单上的菜单链接“tjenester”： 我有没有办法在这三个选项卡之间切换，以及它们的关联菜单，并在单击和打开另一个页面时保持打开状态Javascript 如何在三个不同的菜单之间切换，并在加载新页面时保持最后选择的菜单打开？,javascript,php,jquery,ajax,wordpress,Javascript,Php,Jquery,Ajax,Wordpress,我对javascipt、jquery、php基本一无所知……不幸的是，我只知道html和css。但是今年秋天我要开始上学了！问题是我现在真的在为客户制作一个页面。时间如此之短 我需要三个不同的菜单，它可以在它们之间切换，而不会在加载新页面时更改。我制作了一个模型，其中唯一可点击的是顶部的三个选项卡，以及所有三个菜单上的菜单链接“tjenester”： 我有没有办法在这三个选项卡之间切换，以及它们的关联菜单，并在单击和打开另一个页面时保持打开状态 正如我所说，我是一个noobie…我需要在Wor
正如我所说，我是一个noobie…我需要在Wordpress中创建这个带有Avada主题的网站。我最初认为我可以通过将每个标签链接到不同的页面，并使用它们自己的自定义菜单来解决这个问题——这在Avada中很容易。但发现这当然是可怕的搜索引擎优化。。我不能有三个“主页”页面，三个“关于”页面等。尽管页面加载，我需要更改页眉并保持上次选择的状态。Avada主题已安装，初始设置位于。非常感谢您的帮助 我认为没有任何方法可以仅使用HTML和CSS在页面加载中保持状态。一个相当简单的JavaScript解决方案可能是基于本地存储中的设置将类应用于主体。然后，每次更改时，都必须在本地存储中设置最新的类 比如：
<script>
function setMenu(menu) {
localStorage.setItem("currentMenu", menu);
}
function getMenu() {
var currentMenu = localStorage.getItem("currentMenu");
if (currentMenu) {
document.body.setAttribute("class", currentMenu);
}
}
document.body.addEventListener("load", getMenu());
var thingThatChangesTheMenu = document.getElementById("thingID");
</script>
功能设置菜单（菜单）{
setItem（“当前菜单”，菜单）；
}
函数getMenu（）{
var currentMenu=localStorage.getItem（“currentMenu”）；
如果（当前菜单）{
document.body.setAttribute（“类”，currentMenu）；
}
}
document.body.addEventListener（“加载”，getMenu（））；
var thinthatchangesmenu=document.getElementById（“thingID”）；
[...]
菜单1
菜单2
菜单3
[...]
.Menu1容器{
显示：无；
}
.MENU2容器{
显示：无；
}
.Menu3容器{
显示：无；
}
body.menu1.menu1容器{
显示：块；
}
body.menu2.menu2容器{
显示：块；
}
body.menu3.menu3容器{
显示：块；
}
这是一个简化的版本，假设您不关心身体上的任何其他类。希望能有所帮助。非常感谢您的回答。不幸的是，我几乎没有足够的经验来理解这些代码应该放在哪里：（我真的是个傻瓜，除了编辑现有的Wordpress css、html和基本php之外，还没有尝试过使用任何其他代码：-/我有没有办法用现有的Wordpress菜单“框架”来实现这一点-这样我就可以像在Wordpress admin中一样创建三个菜单，并通过向其中添加类来加载它们，而不是用代码来编写它们？另一个选项可能是，我创建一个包含三个菜单项的菜单，每个菜单项水平显示一个下拉菜单，并以某种方式使所选下拉菜单始终可见，尽管加载了新页面，但仍将保持可见。就像手风琴下拉，只是水平（我感觉迟钝）
<html>
<body>
[...]
<button onclick="setMenu('menu1')">menu 1</button>
<button onclick="setMenu('menu2')">menu 2</button>
<button onclick="setMenu('menu3')">menu 3</button>
[...]
</body>
</html>
<style>
.menu1Container {
display: none;
}
.menu2Container {
display: none;
}
.menu3Container {
display: none;
}
body.menu1 .menu1Container {
display: block;
}
body.menu2 .menu2Container {
display: block;
}
body.menu3 .menu3Container {
display: block;
}
</style>