導航欄製作主div出現和消失

我想讓主div不見了，關於頁面出現，但由於某種原因，我無法讓它工作。這是一個導航欄，如果我能得到一個工作，我可以讓他們都這麼認爲幫助。當我按關於段落並使關於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:[email protected]">[email protected]</a> </p>

來源

2017-09-13 Lars de bro

'document.getElementsByClassName'返回結果的數組。即使只有1個結果，您仍然需要通過索引訪問它。嘗試'document.getElementsByClassName（「home」）[0] .style.display =「none」;' – DillGromble

使用

document.getElementsByClassName

返回數組元素沒有，所以你不能沒有索引號更改元素試試這個

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

來源

2017-09-13 14:58:07

我有這在總maby你可以發現問題。它仍然是不適合我maby它是我正在使用的程序（括號） –

沒有括號是完美的，但也許你做錯了什麼 –

給我發新代碼 –

可以有不止使用一個元素相同的className和document.getElementsByClassName返回多個結果，這是一個數組。

您可以訪問第一個元素或使用id使它們唯一。檢查下面我爲您創建的例子：

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

<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:[email protected]">[email protected]</a> </p> 
 
    </div> 
 

 
<script> 
 
\t function goA(){ 
 
    document.getElementById("home").style.display = "none"; 
 
    document.getElementById("about").style.display = "block"; 
 
    } 
 
    function aoG(){ 
 
    \t document.getElementById("home").style.display = "block"; 
 
    document.getElementById("about").style.display = "none"; 
 
    } 
 
</script> 
 
</body>

來源

2017-09-13 15:03:46 bhansa

導航欄製作主div出現和消失

回答

相關問題