Я делаю проект для своей школы, и мне нужна главная страница, где я могу отображать все свои разные 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');
    }
}
0
Deimos 29 Май 2017 в 00:57

2 ответа

Лучший ответ

1-е использование var divState = ['home', 'forms']; содержит все ваши div.

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>
0
Dalin Huang 28 Май 2017 в 22:23

Если вы хотите показывать 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';
    }
}
0
yadejo 28 Май 2017 в 22:11