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

第一次使用var divState = ['home', 'forms'];保留所有div。

当您单击隐藏所有其他div时显示第二个，显示单击的那个。

页面加载时第3次调用showhide('home')。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您只想在点击时显示div，但在再次点击同一链接时不隐藏它，只需将showHide()函数的最后一行替换为始终显示div而不是切换它。 / p>

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

在主页面JavaScript中只显示一个div

2 个答案: