Javascript 有两个独立的<；导航>；独立工作的标签

我试图让两个独立的导航菜单独立运行，这取决于用户单击的按钮，并显示在同一个位置（左）。我有两个独立的功能，但只能让两个按钮打开相同的导航菜单（链接1、2、3而不是链接4、5、6）。我可以打开第二个菜单，但前提是我将类名改为topnav而不是sidenav。我也尝试过getElementByid，但它也不起作用。谢谢你的帮助

<div class="w3-half w3-container">
    <div id="FloatingBox" class="w3-card-16 w3-round w3-blue-grey w3-animate-opacity w3-animate-bottom" style="font-size:xx-large">
        <p><a title="Personal Information" onclick="w3_openpers()" class="w3-btn-floating w3-card-8 w3-animate-bottom w3-ripple w3-theme w3-red"><i class="fa fa-plus"></i></a> 
            Personal
        </p>
    </div>
</div>
<div class="w3-half w3-container">
    <div id="FloatingBox" class="w3-card-16 w3-round w3-blue-grey w3-animate-opacity w3-animate-bottom" style="font-size:xx-large; ">
        <p><a title="Professional Information" onclick="w3_openprof()" class="w3-btn-floating w3-card-8 w3-animate-bottom w3-ripple w3-theme w3-red"><i class="fa fa-plus"></i></a> 
            Professional
        </p>
    </div>
</div>
<!--- Side Navigation Personal--->
<nav id="persnav" class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none;z-index:5">
    <a href="javascript:void(0)">Link 1</a>     
    <a href="javascript:void(0)">Link 2</a>     
    <a href="javascript:void(0)">Link 3</a>
    <br>
    <a href="javascript:void(0)" onclick="w3_closepers()" class="w3-closenav w3-text-theme w3-text-red" >Close &times;</a>      
</nav>
<!--- Script for Side Navigation Personal--->
<script>
    function w3_openpers() {
        document.getElementsByClassName("w3-sidenav")[0].style.width = "20%";
        document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center";
        document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "30px";
        document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "20%";
        document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
        document.getElementsByClassName("w3-sidenav")[0].style.opacity = "1";
    }
    function w3_closepers() {
        document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
    }
</script>
<!--- Side Navigation Professional--->
<nav id="profnav" class="w3-sidenav w3-white w3-card-2 w3-animate-right" style="display:none;z-index:5">
    <a href="javascript:void(0)">Link 4</a>     
    <a href="javascript:void(0)">Link 5</a>     
    <a href="javascript:void(0)">Link 6</a>
    <br>
    <a href="javascript:void(0)" onclick="w3_closeprof()" class="w3-closenav w3-text-theme w3-text-red" >Close &times;</a>      
</nav>
<!--- Script for Side Navigation Professional--->
<script>
    function w3_openprof() {
        document.getElementsByClassName("w3-sidenav")[0].style.width = "20%";
        document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center";
        document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "30px";
        document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "20%";
        document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
        document.getElementsByClassName("w3-sidenav")[0].style.opacity = "1";
    }
    function w3_closeprof() {
        document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
    }
</script>

函数w3_openpers（）{
document.getElementsByClassName（“w3 sidenav”）[0].style.width=“20%”；
document.getElementsByClassName（“w3 sidenav”）[0].style.textAlign=“center”；
document.getElementsByClassName（“w3 sidenav”）[0].style.fontSize=“30px”；
document.getElementsByClassName（“w3 sidenav”）[0].style.paddingTop=“20%”；
document.getElementsByClassName（“w3 sidenav”）[0].style.display=“block”；
document.getElementsByClassName（“w3 sidenav”）[0].style.opacity=“1”；
}
功能w3_闭门器（）{
document.getElementsByClassName（“w3 sidenav”）[0].style.display=“无”；
}


函数w3_openprof（）{
document.getElementsByClassName（“w3 sidenav”）[0].style.width=“20%”；
document.getElementsByClassName（“w3 sidenav”）[0].style.textAlign=“center”；
document.getElementsByClassName（“w3 sidenav”）[0].style.fontSize=“30px”；
document.getElementsByClassName（“w3 sidenav”）[0].style.paddingTop=“20%”；
document.getElementsByClassName（“w3 sidenav”）[0].style.display=“block”；
document.getElementsByClassName（“w3 sidenav”）[0].style.opacity=“1”；
}
函数w3_closeprof（）{
document.getElementsByClassName（“w3 sidenav”）[0].style.display=“无”；
}

我建议只做一个函数，让它更简单：

函数w3\u打开（elNum）{
var el=document.getElementsByClassName（“w3 sidenav”）[elNum]；
el.style.width=“20%”；
el.style.textAlign=“中心”；
el.style.fontSize=“30px”；
el.style.paddingTop=“20%”；
el.style.display=“块”；
el.style.opacity=“1”；
}
函数w3\u关闭（elNum）{
document.getElementsByClassName（“w3 sidenav”）[elNum].style.display=“无”；
}

尝试使用getElementsById而不是getElementsByClassName

获得将第二个脚本更改为以下脚本的提示：

    <script>
function w3_openprof() {
    document.getElementsByClassName("w3-sidenav")[1].style.width = "20%";
    document.getElementsByClassName("w3-sidenav")[1].style.textAlign = "center";
    document.getElementsByClassName("w3-sidenav")[1].style.fontSize = "30px";
    document.getElementsByClassName("w3-sidenav")[1].style.paddingTop = "20%";
    document.getElementsByClassName("w3-sidenav")[1].style.display = "block";
    document.getElementsByClassName("w3-sidenav")[1].style.opacity = "1";
}
function w3_closeprof() {
    document.getElementsByClassName("w3-sidenav")[1].style.display = "none";
}
</script>

函数w3_openprof（）{
document.getElementsByClassName（“w3 sidenav”）[1].style.width=“20%”；
document.getElementsByClassName（“w3 sidenav”）[1].style.textAlign=“center”；
document.getElementsByClassName（“w3 sidenav”）[1].style.fontSize=“30px”；
document.getElementsByClassName（“w3 sidenav”）[1].style.paddingTop=“20%”；
document.getElementsByClassName（“w3 sidenav”）[1].style.display=“block”；
document.getElementsByClassName（“w3 sidenav”）[1].style.opacity=“1”；
}
函数w3_closeprof（）{
document.getElementsByClassName（“w3 sidenav”）[1].style.display=“无”；
}

---

很好

所以你想让一个脚本为所有的

工作吗？那就是

getElementById

，fyian，不，这不是真正的答案。哈哈，我删除了这个答案，因为这不是最好的，非常混乱：没有问题：我很高兴能帮上忙