Javascript 一个页面上的双面导航只能工作一次

我想在我的页面上有两个侧边栏，一个在左边，另一个在右边。但如果我把两个按钮都放在一页上，两个按钮都会工作，但只会打开一侧导航。它们只执行第二个JavaScript。我需要的是左侧按钮打开左侧菜单和右侧菜单按钮打开右侧菜单。但现在我发现两个菜单按钮只打开一面。我在两个菜单中使用了不同的类。我找不到任何解决办法

函数openNav{ document.getElementByIdmySidebar.style.width=250px； document.getElementByIdmain.style.marginLeft=250px； } 关闭导航功能{ document.getElementByIdmySidebar.style.width=0； document.getElementByIdmain.style.marginLeft=0； } //第二导航 函数openNav{ document.getElementByIdmySidebar2.style.width=250px； document.getelementbyidmain 2.style.marginLeft=250px； } 关闭导航功能{ document.getElementByIdmySidebar2.style.width=0； document.getElementByIdmain2.style.marginLeft=0； } /*左导航*/ *{ 保证金：0； 填充：0； } 身体{ 字体系列：拉托，无衬线； } .侧边栏{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 左：0； 背景色：f3a148； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧边栏a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：000000； 显示：块； 过渡：0.3s； } .侧边栏a：悬停{ 颜色：F1F1； } .侧边栏.关闭{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } .openbtn{ 字体大小：16px； 光标：指针； 背景色：f4b36d； 颜色：000000； 填充：10px 15px； 边界：无； 位置：固定； 最高：50%； 左：-30px； 变换：旋转-90度； 边框左下半径：10px； 边框右下半径：10px； } .openbtn:悬停{ 背景色：f3a148； } 主要{ 过渡：左边距。5s； 填充：16px； } .fa地址卡、.fa硬币、.fa grin alt、.fa信封{ 位置：相对位置； top:41px； 左：5px； 字体大小：20px； } /*在高度小于450px的较小屏幕上，更改sidenav的样式，减少填充，并减小字体大小*/ @媒体屏幕和最大高度：450px{ .侧边栏{填充顶部：15px；} .sidebar a{font size:18px；} } /*右导航---*/ *{ 保证金：0； 填充：0； } 身体{ 字体系列：拉托，无衬线； } .侧边栏2{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 右：0； 背景色：f3a148； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧边栏2 a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：000000； 显示：块； 过渡：0.3s； } .侧边栏2 a:悬停{ 颜色：F1F1； } .侧边栏2.关闭BTN2{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } .openbtn2{ 字体大小：16px； 光标：指针； 背景色：f4b36d； 颜色：000000； 填充：10px 15px； 边界：无； 位置：固定； 最高：50%； 右：-30px； 变换：旋转90度； 边框左下半径：10px； 边框右下半径：10px； } .openbtn2：悬停{ 背景色：f3a148； } 缅因州2{ 过渡：左边距。5s； 填充：16px； } /*在高度小于450px的较小屏幕上，更改sidenav的样式，减少填充，并减小字体大小*/ @媒体屏幕和最大高度：450px{ .侧边栏{填充顶部：15px；} .sidebar a{font size:18px；} } ☰ 梅尼乌 链接 ☰ 梅尼乌

---

您没有在JavaScript中分离函数，它们的名称类似。改名

函数openNav{ document.getElementByIdmySidebar.style.width=250px； document.getElementByIdmain.style.marginLeft=250px； } 关闭导航功能{ document.getElementByIdmySidebar.style.width=0； document.getElementByIdmain.style.marginLeft=0； } //第二导航 函数openNav2{ document.getElementByIdmySidebar2.style.width=250px； document.getelementbyidmain 2.style.marginLeft=250px； } 函数closeNav2{ document.getElementByIdmySidebar2.style.width=0； document.getElementByIdmain2.style.marginLeft=0； } /*左导航*/ *{ 保证金：0； 填充：0； } 身体{ 字体系列：拉托，无衬线； } .侧边栏{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 左：0； 背景色：f3a148； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧边栏a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：000000； 显示：块； 过渡：0.3s； } .侧边栏a：悬停{ 颜色：F1F1； } .侧边栏.关闭{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } .openbtn{ 字体大小：16px； 光标：指针； 背景色：f4b36d； 颜色：000000； 填充：10px 15px； 边界：无； 位置：固定； 最高：50%； 左：-30px； 变换：旋转-90度； 边框左下半径：10px； 边框右下半径：10px； } .openbtn:悬停{ 背景色：f3a148； } 主要{ 过渡：左边距。5s； 填充：16px； } .fa地址卡、.fa硬币、.fa grin alt、.fa信封{ 位置：相对位置； top:41px； 左：5px； 字体大小：20px； } /*在高度小于450px的较小屏幕上，更改sidenav的样式，减少填充，并减小字体大小*/ @媒体屏幕和最大高度：450px{ .侧边栏{填充顶部：15px；} .sidebar a{font size:18px；} } /*右导航---*/ *{ 保证金：0； 填充：0； } 身体{ 字体系列：拉托，无衬线； } .侧边栏2{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 右：0； 背景色：f3a148； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧边栏2 a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：000000； 显示：块； 过渡：0.3s； } .侧边栏2 a:悬停{ 颜色：F1F1； } .侧边栏2.关闭BTN2{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } .openbtn2{ 字体大小：16px； 光标：指针； 背景色：f4b36d； 颜色：000000； 填充：10px 15px； 边界：无； 位置：固定； 最高：50%； 右：-30px； 变换：旋转90度； 边框左下半径：10px； 边框右下半径：10px； } .openbtn2：悬停{ 背景色：f3a148； } 缅因州2{ 过渡：左边距。5s； 填充：16px； } /*在高度小于450px的较小屏幕上，更改sidenav的样式，减少填充，并减小字体大小*/ @媒体屏幕和最大高度：450px{ .侧边栏{填充顶部：15px；} .sidebar a{font size:18px；} } ☰ 梅尼乌 链接 ☰ 梅尼乌

---

您没有在JavaScript中分离函数，它们的名称类似。改名

函数openNav{ document.getElementByIdmySidebar.style.width=250px； document.getElementByIdmain.style.marginLeft=250px； } 关闭导航功能{ document.getElementByIdmySidebar.style.width=0； document.getElementByIdmain.style.marginLeft=0； } //第二导航 函数openNav2{ document.getElementByIdmySidebar2.style.width=250px； document.getelementbyidmain 2.style.marginLeft=250px； } 函数closeNav2{ document.getElementByIdmySidebar2.style.width=0； document.getElementByIdmain2.style.marginLeft=0； } /*左导航*/ *{ 保证金：0； 填充：0； } 身体{ 字体系列：拉托，无衬线； } .侧边栏{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 左：0； 背景色：f3a148； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧边栏a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：000000； 显示：块； 过渡：0.3s； } .侧边栏a：悬停{ 颜色：F1F1； } .侧边栏.关闭{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } .openbtn{ 字体大小：16px； 光标：指针； 背景色：f4b36d； 颜色：000000； 填充：10px 15px； 边界：无； 位置：固定； 最高：50%； 左：-30px； 变换：旋转-90度； 边框左下半径：10px； 边框右下半径：10px； } .openbtn:悬停{ 背景色：f3a148； } 主要{ 过渡：左边距。5s； 填充：16px； } .fa地址卡、.fa硬币、.fa grin alt、.fa信封{ 位置：相对位置； top:41px； 左：5px； 字体大小：20px； } /*在高度小于450px的较小屏幕上，更改sidenav的样式，减少填充，并减小字体大小*/ @媒体屏幕和最大高度：450px{ .侧边栏{填充顶部：15px；} .sidebar a{font size:18px；} } /*右导航---*/ *{ 保证金：0； 填充：0； } 身体{ 字体系列：拉托，无衬线； } .侧边栏2{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 右：0； 背景色：f3a148； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧边栏2 a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：000000； 显示：块； 过渡：0.3s； } .侧边栏2 a:悬停{ 颜色：F1F1； } .侧边栏2.关闭BTN2{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } .openbtn2{ 字体大小：16px； 光标：指针； 背景色：f4b36d； 颜色：000000； 填充：10px 15px； 边界：无； 位置：固定； 最高：50%； 右：-30px； 变换：旋转90度； 边框左下半径：10px； 边框右下半径：10px； } .openbtn2：悬停{ 背景色：f3a148； } 缅因州2{ 过渡：左边距。5s； 填充：16px； } /*在高度小于450px的较小屏幕上，更改sidenav的样式，减少填充，并减小字体大小*/ @媒体屏幕和最大高度：450px{ .侧边栏{填充顶部：15px；} .sidebar a{font size:18px；} } ☰ 梅尼乌 链接 ☰ 梅尼乌

---

两个按钮都使用相同的函数openNav。您可以通过在参数中传递navid来解决此问题，并且可以在getElementById中使用此参数来显示隐藏nav

请参见下面的工作代码

函数openNavsidebarId，main{ document.getElementByIdsidebarId.style.width=250px； document.getElementByIdmain.style.marginLeft=250px； } 函数closeNavsidebarId，main{ document.getElementByIdsidebarId.style.width=0； document.getElementByIdmain.style.marginLeft=0； } /*左导航*/ * { 保证金：0； 填充：0； } 身体{ 字体系列：拉托，无衬线； } .侧边栏{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 左：0； 背景色：f3a148； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧边栏a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：000000； 显示：块； 过渡：0.3s； } .侧边栏a：悬停{ 颜色：F1F1； } .侧边栏.关闭{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } .openbtn{ 字体大小：16px； 光标：指针； 背景色：f4b36d； 颜色：000000； 填充：10px 15px； 边界：无； 位置：固定； 最高：50%； 左：-30px； 变换：旋转-90度； 边框左下半径：10px； 边框右下半径：10px； } .openbtn:悬停{ 背景色：f3a148； } 主要{ 过渡：左边距。5s； 填充：16px； } .fa地址卡， .fa硬币， 法格林先生， .fa信封{ 位置：相对位置； top:41px； 左：5px； 字体大小：20px； } /*在高度小于450px的较小屏幕上，更改sidenav的样式，减少填充，并减小字体大小*/ @媒体屏幕和最大高度：450px{ .侧边栏{ 填充顶部：15px； } .侧边栏a{ 字号：18px； } } /*右导航---*/ * { 保证金：0； 填充：0； } 身体{ 字体系列：拉托，无衬线； } .侧边栏2{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 右：0； 背景色：f3a148； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧边栏2 a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：000000； 显示：块； 过渡：0.3s； } .侧边栏2 a:悬停{ 颜色：F1F1； } .侧边栏2.关闭BTN2{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } .openbtn2{ 字体大小：16px； 光标：指针； 背景色：f4b36d； 颜色：000000； 填充：10px 15px； 边界：无； 位置：固定； 最高：50%； 右：-30px； 变换：旋转90度； 边框左下半径：10px； 边框右下半径：10px； } .openbtn2：悬停{ 背景色：f3a148； } 缅因州2{ 过渡：左边距。5s； 填充：16px； } /*在高度小于450px的较小屏幕上，更改sidenav的样式，减少填充，并减小字体大小*/ @媒体屏幕和最大高度：450px{ .侧边栏{ 填充顶部：15px； } .侧边栏a{ 字号：18px； } } ☰ 梅尼乌 链接 ☰ 梅尼乌

---

两个按钮都使用相同的函数openNav。您可以通过在参数中传递navid来解决此问题，并且可以在getElementById中使用此参数来显示隐藏nav

请参见下面的工作代码

函数openNavsidebarId，main{ document.getElementByIdsidebarId.style.width=250px； document.getElementByIdmain.style.marginLeft=250px； } 函数closeNavsidebarId，main{ document.getElementByIdsidebarId.style.width=0； document.getElementByIdmain.style.marginLeft=0； } /*左导航*/ * { 保证金：0； 填充：0； } 身体{ 字体系列：拉托，无衬线； } .侧边栏{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 左：0； 背景色：f3a148； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧边栏a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：000000； 显示：块； 过渡：0.3s； } .侧边栏a：悬停{ 颜色：F1F1； } .侧边栏.关闭{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } .openbtn{ 字体大小：16px； 光标：指针； 背景色：f4b36d； 颜色：000000； 填充：10px 15px； 边界：无； 位置：固定； 最高：50%； 左：-30px； 变换：旋转-90度； 边框左下半径：10px； 边框右下半径：10px； } .openbtn:悬停{ 背景色：f3a148； } 主要{ 过渡：左边距。5s； 填充：16px； } .fa地址卡， .fa硬币， 法格林先生， .fa信封{ 位置：相对位置； top:41px； 左：5px； 字体大小：20px； } /*在高度小于450px的较小屏幕上，更改sidenav的样式，减少填充，并减小字体大小*/ @媒体屏幕和最大高度：450px{ .侧边栏{ 填充顶部：15px； } .侧边栏a{ 字号：18px； } } /*右导航---*/ * { 保证金：0； 填充：0； } 身体{ 字体系列：拉托，无衬线； } .侧边栏2{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 右：0； 背景色：f3a148； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧边栏2 a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：000000； 显示：块； 过渡：0.3s； } .侧边栏2 a:悬停{ 颜色：F1F1； } .侧边栏2.关闭BTN2{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } .openbtn2{ 字体大小：16px； 光标：指针； 背景色：f4b36d； 颜色：000000； 填充：10px 15px； 边界：没有 氖； 位置：固定； 最高：50%； 右：-30px； 变换：旋转90度； 边框左下半径：10px； 边框右下半径：10px； } .openbtn2：悬停{ 背景色：f3a148； } 缅因州2{ 过渡：左边距。5s； 填充：16px； } /*在高度小于450px的较小屏幕上，更改sidenav的样式，减少填充，并减小字体大小*/ @媒体屏幕和最大高度：450px{ .侧边栏{ 填充顶部：15px； } .侧边栏a{ 字号：18px； } } ☰ 梅尼乌 链接 ☰ 梅尼乌

---

在左边我从其他部门得到了错误的链接为什么会这样？在左边我从其他部门得到了错误的链接为什么会这样？