メインページにdivを1つだけ表示するJavaScript

Question

私の学校のプロジェクトを作っています。私はすべての異なるdivを表示できるメインページが必要ですが、一度に1つしか表示されません。私はjsの多くを理解していませんが、私は仕事をしているコードを手に入れましたが、同じボタンをクリックするとそれが隠されてしまいます。

これは私のメインページです。

HTML：

<ul class="sidenav"> 
    <li><a class="active" href="javascript:void(null)" onclick="showhide('home');">Home</a></li> 
    <li><a href="javascript:void(null)" onclick="showhide('forms');">Forms</a></li> 
</ul> 

CSS：

div.content { 
    margin-left: 20%; 
    padding: 1px 16px; 
    height: 1000px; 
    display: none; 
} 

のJavaScript：var divState = ['home', 'forms'];はすべてあなたのdivを保持

var divState = {}; 
function showhide(id) { 
    if (document.getElementById) { 
     var divid = document.getElementById(id); 
     divState[id] = (divState[id]) ? false : true; 
     for (var div in divState){ 
      if (divState[div] && div != id){ 
       document.getElementById(div).style.display = 'none'; 
       divState[div] = false; 
      } 
     } 
     divid.style.display = (divid.style.display == 'block' ? 'none' : 'block'); 
    } 
} 

Answer 1

第一使用。

2番目のdivをすべて非表示にすると、クリックしたものが表示されます。

第3コールshowhide('home')がページの読み込み時に表示されます。

div.content { 
 
    margin-left: 20%; 
 
    padding: 1px 16px; 
 
    height: 1000px; 
 
    display: none; 
 
}

<ul class="sidenav"> 
 
    <li><a class="active" href="javascript:void(null)" onclick="showhide('home');">Home</a></li> 
 
    <li><a href="javascript:void(null)" onclick="showhide('forms');">Forms</a></li> 
 
</ul> 
 
<div id="home"> 
 
    home div 
 
</div> 
 
<div id="forms"> 
 
    forms div 
 
</div> 
 

 

 
<script> 
 
    var divState = ['home', 'forms']; 
 

 
    function showhide(id) { 
 
    if (document.getElementById) { 
 
     var divid = document.getElementById(id); 
 

 
     for (var d in divState) { 
 
     if (divState[d] != id) { 
 
      document.getElementById(divState[d]).style.display = 'none'; 
 
     } else { 
 
      divid.style.display = 'block'; 
 
     } 
 
     } 
 
    } 
 
    } 
 
    
 
    showhide('home'); 
 
</script>

Answer 2

あなただけのクリックでのdivを示すが、同じリンクを再度クリックされたときにそれを隠していない、ただいつものdivを表示するshowHide()関数の最後の行を交換したい場合それをトグルする代わりに。

var divState = {}; 
function showhide(id) { 
    if (document.getElementById) { 
     var divid = document.getElementById(id); 
     divState[id] = (divState[id]) ? false : true; 
     for (var div in divState){ 
      if (divState[div] && div != id){ 
       document.getElementById(div).style.display = 'none'; 
       divState[div] = false; 
      } 
     } 
     divid.style.display = 'block'; 
    } 
}