javascript - 使主要 div 出现和消失的导航栏

Question

我试图让主页 div 消失并显示关于页面，但由于某种原因我无法让它工作。它用于导航栏，如果我能让一个导航栏工作，我就能让它们全部工作，所以请帮忙。当我按下关于段落并使关于 div 出现时，我需要主页消失。我希望有人能帮助我，我已经在谷歌上搜索了很多，但还是行不通。

// page movement 
function goA() {
  document.getElementsByClassName("home").style.display = "none";
  document.getElementsByClassName("about").style.display = "block";
}

.home {
  background: #4f4f4f;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.backgroundpic {
  background-image: url("http://cdn.wallpapersafari.com/58/58/hlVdYW.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 93.7%;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 30px;
  margin-top: 30px;
  overflow: hidden;
}

.about {
  font-family: Open sans;
  color: #fff;
  font-size: 150%;
  text-align: left;
  display: inline-block;
  cursor: default;
}

.about a {
  text-decoration: none;
  color: #fff;
  border-bottom: 2px solid rgba(225, 225, 225, .7);
}

.about {
  font-family: Open sans;
  color: #fff;
  font-size: 150%;
  cursor: default;
  position: relative;
  padding: 0;
  margin-left: 50%;
  margin-right: 10%;
  margin-top: 18.4%;
  text-align: left;
  display: none;
}

<!--  home div  -->
<div class="home">
  <div class="backgroundpic">
    <div class="picgradiant">

      <!--  navigation button  -->
      <div class="navigation">
        <div class="navloc">
          <p class="loc" onclick="goW()">WebDesign</p>
          <p class="loc" onclick="goGr()">Photography</p>
          <p class="loc" onclick="goS()">SketchUp</p>
          <p class="loc" onclick="goSh()">Photoshop</p>
          <p class="loc" onclick="goA()">About</p>
          <p class="loc" onclick="goH()">Home</p>
        </div>
        <div class="stripes">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
        </div>
      </div>

      <!--  text about myself  -->
      <div class="totalheader">
        <div class="headtext">
          <p class="header1">Sup, I'm Lars.</p>
          <p class="text1">I do things!</p>
        </div>
        <p class="buttonhead">click to lear more</p>
      </div>

    </div>
  </div>
</div>
<!--  about div  -->
<div class="about">
  <p>I like to explore different programs and try out as many things as I can. I do this so I can make an informed, good and fun career choice! A lot of projects start with me and my friend talking and getting an idea. Eventually we try to make it happen,
    but sometimes help altogether and sometimes us work together. my goal at the moment is the become a game developer, but I am also interested in game design and internet security. I am not sure what the future holds for me, but in the end, I hope that
    I'll have a fun job. If you want more info you can contact me at: <a href="mailto:larsmulleneers@hotmail.nl">Larsmulleneers@hotmail.nl</a> </p>

Answer 1

使用

 document.getElementsByClassName

返回一个数组而不是元素，所以你不能在没有索引号的情况下更改元素 试试这个

document.getElementsByClassName('home')[0].style.display = 'none';
document.getElementsByClassName('about')[0].style.display = 'block'