在首頁JavaScript中僅顯示一個div

Question

我正在為我的學校做一個項目，我需要一個主頁，可以顯示所有不同的div，但一次只能顯示一個，並且總是顯示一個。 我對js不太了解，但是我得到執行此工作的代碼，但是如果單擊相同的按鈕，它將隱藏它，並且我不想關閉它，只是停留在同一div中。

它會自行作用，即我的主頁。

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 = {};
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

1st使用var divState = ['home', 'forms']; 保持所有的div。

第二，當您單擊“隱藏所有其他div”時，顯示被單擊的那個。

第三次在頁面加載時調用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，而又不想在再次單擊同一鏈接時隱藏它，則只需替換showHide()函數的最后一行即可始終顯示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 = 'block';
    }
}