Question

我正在努力让家庭div消失，并且会出现关于页面但由于某种原因我无法让它工作。这是一个导航栏，如果我可以得到一个工作，我可以得到他们所有请求帮助。当我按下约一段然后出现关于div时，我需要回家消失。我希望有人可以帮助我，我已经google了很多，它只是不会工作。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

使用

 document.getElementsByClassName

返回一个数组而不是元素，因此您无法在没有索引号的情况下更改该元素试试这个

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

Answer 2

可以有多个元素使用相同的className，document.getElementsByClassName返回多个结果，这是一个数组。

您可以访问第一个元素或使用id使它们唯一。查看我为您创建的以下示例：

＆＃13;

 #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;
 }

＆＃13;

<body>

  <li onclick="aoG()">Home</li>
  <li onclick="goA()">About</li>

  <!--  home div  -->
  <div id="home">
    <div class="backgroundpic">
      <div class="picgradiant">

        <!--  navigation button  -->
        <div class="navigation" onclick="rotatebar(this)">
          <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 id="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>
  </div>

<script>
	 function goA(){
    document.getElementById("home").style.display = "none";
    document.getElementById("about").style.display = "block";
  }
  function aoG(){
  	document.getElementById("home").style.display = "block";
    document.getElementById("about").style.display = "none";
  }
</script>
</body>

＆＃13;

制作主要div的导航栏出现和消失

2 个答案: