Question

<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>

这是我的代码。我想用我的HTML放JavaScript。一旦我点击它们（sidenav栏），我想显示地图，植物群，动物群等的内容。我想将内容显示在靠近sidenav栏的黑色表格中，但是现在我想学习如何只显示内容ONCLICK。我不知道如何解决这个问题。我不想弄乱我的HTML和CSS，我有非常好的网站设计，并希望进一步，但我卡住了。你有什么想法？我会很感激...... 我是初学编码员...... 谢谢！

Answer 1

尝试将您的JS放入<script>标签＆amp;你的CSS在<style>标签中，并确保在JS中你的字符串周围有引号。

<head>
<style>
body {
  background: black
}

.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;
  }
}
</style>
</head>
<body>
<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>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

function displayContent() {
  document.getElementById("mySidenav").style.width = "250px";
}
</script>

</body>

单击sidenav栏时显示内容

1 个答案: