Javascript 单击侧导航栏时显示内容

这是我的密码。我想把JavaScript和我的HTML放在一起。我想在单击地图、植物群、动物群等（侧导航栏）后显示它们的内容。我希望内容显示在靠近sidenav栏的黑色表格中，但现在我想学习如何只在单击时显示内容。我不知道如何处理这个问题。我不想弄乱我的html或CSS，我有非常好的网站设计，并想进一步，但我卡住了。 你有什么想法吗？我会很感激。。。 我是初学者编码器。。。

---

谢谢大家!

尝试将JS放入

标记中&将CSS放入

标记中，并确保JS中的字符串周围有引号

身体{
背景：黑色
}
.侧导航{
身高：100%；
宽度：0%；
字体大小：150px；
字体系列：Bradley Hand ITC；
位置：相对位置；
z指数：1；
/*底部：370px*/
左：0；
背景色：#111；
不透明度：0.9；
溢出x：隐藏；
过渡：0.5s；
填充顶部：30px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：45px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停，
.a:焦点{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
顶部：0px；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
}
☰ 打开
函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}
函数displayContent（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
}

我知道。。。我以前把它们放在这些标签上。不管怎样，谢谢你，我想我找到了别的办法。

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">Map</a>
<a href="#">Climate</a>
<a href="#">Flora</a>
<a href="#">Fauna</a>
<a href="#">National Parks</a>
<a href="#">Contact us</a>
</div>
<span style="font-size:70px;font-family:Bradley Hand ITC;font-weight:bold;cursor:pointer;position:absolute;top:10px;left:0px;color:white;" onclick="openNav()">&#9776; open</span>
</div




<pre><code>




.sidenav {
      height: 100%;
      width: 0%;
      font-size: 150px;
      font-family: Bradley Hand ITC;
      position: relative;
      z-index: 1;
      bottom: 370px;
      left: 0;
      background-color: #111;
      opacity: 0.9;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 30px;
  }
.sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 45px;
      color: #818181;
      display: block;
      transition: 0.3s;
  }
.sidenav a:hover, .offcanvas a:focus {
      color: #f1f1f1;
  }
.sidenav .closebtn {
      position: absolute;
      top: 0px;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
  }
@media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
  }







</code></pre>

<pre><code>




function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
  }
  function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
  }
  function displayContent() {
      document.getElementById("mySidenav").style.width = 250px;
      onclick="Map" display=""
  }




</code></pre>