Javascript 如何隐藏侧面板，使它们不会相互重叠

我有4个侧面板，当我点击它们相应的按钮时，它们相互重叠。当另一个打开时，我如何隐藏一个

这是触发面板的菜单：

    <div id="resources-menu-main">
    <ul>
    <li id="toc-main-button"><a href="#toc-beginning" onclick="showLeftPanel();"><img src="gfx/toc.png" width="50" alt="Table of Contents"></a></li>
    <li id="footnotes-main-button"><a href="#footnotes-section" onclick="showFootnotesPanel();"><img src="gfx/footnotes.png" width="50" alt="Footnotes"></a></li>
    <li id="references-main-button"><a href="#references-section" onclick="showReferencesPanel();"><img src="gfx/references.png" width="50" alt="References"></a></li>
    <li id="images-main-button"><a href="#images-section" onclick="showImagesPanel();"><img src="gfx/images.png" width="50" alt="Images"></a></li>
    <li id="information-main-button"><a href="#information-section" onclick="showInformationPanel();"><img src="gfx/info.png" width="50" alt="Information"></a></li>
   </ul>
   </div>

谢谢大家!

---

好吧，我还是不确定你想要什么，但我把它分解成一个基本的布局，使它更简单。这是小提琴

基本上，您可以显示所需的div，然后隐藏之前显示的div，如下所示：

$('#link1').click(function() {
  var left = $('#left-div1');
  var leftShow = $('.left-div.show');
  left.addClass('show');
  leftShow.removeClass('show');
});

---

你能把它放到JSFIDLE中并添加一些样式吗？这将使你更容易看到你正在努力实现的目标。我，我已经尝试过了，但它似乎不起作用，网站相当复杂。我确实拍了一张截图。这有帮助吗？否则，是否可以在此上载或共享文件？谢谢是的，截图可能会有用！单击主菜单上的按钮时，我上传了打开面板的图像。嗨，科科，谢谢你的回答。不过，您的解决方案需要更改我的整个网站。有没有什么方法可以在不使用jquery的情况下对我的javascript执行同样的操作？我使用此示例制作面板：。我只做了4个面板而不是1个，还有一个菜单和一个侧箭头来触发面板。这有助于更好地理解我的示例吗？我一直在尝试实现您提出的解决方案，但我的问题是，相同的脚本应该打开侧箭头，允许从面板进行导航并突出显示面板中的部分，当我更改它时，这将不起作用。。。这就是我想要保留脚本的原因，但是只要添加一些东西，当你打开另一个面板时，它就会关闭一个面板。我只是不知道怎么做，很抱歉。jquery只是一条捷径。您应该能够使用javascript实现同样的功能。不过我不确定我还能不能再帮你了。我已经用那个教程中的html/css/js更新了fiddle。我还是javascript的初学者，别担心！你已经帮了我很大的忙了。。。我正在研究这两种代码的组合。谢谢你抽出时间！

    function showFootnotesPanel() {
    var elem = document.getElementById("footnotes-section");
    if (elem.classList) {
    console.log("classList supported");
    elem.classList.toggle("show");
    } else {
    var classes = elem.className;
    if (classes.indexOf("show") >= 0) {
      elem.className = classes.replace("show", "");
    } else {
      elem.className = classes + " show"; 
    }
    console.log(elem.className);
    }
    }

$('#link1').click(function() {
  var left = $('#left-div1');
  var leftShow = $('.left-div.show');
  left.addClass('show');
  leftShow.removeClass('show');
});