3

Я новичек. Никак не могу разобраться, как закрыть один div если нажимаем на другую кнопку.

<body>
<a onclick="look('about'); return false;" href="#">ABOUT</a>
<a onclick="look('contacts'); return false;" href="#">CONTACTS</a>

<div style="display:none" id="about"><p>about</p></div>
<div style="display:none" id="contacts"><p>contacts</p></div>
<div><p>Постоянный див который не нужно закрывать</p></div>
<script>
  function look(elemId) {
    var elem = document.getElementById(elemId);
    elem.style.display === "none" ?
      elem.style.display = "block" : elem.style.display = "none";
  }
</script>
</body>

1
  • Добавил постоянный див который закрывать нельзя.
    – Olexko
    20 мая 2017 в 7:28

2 ответа 2

3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<body>
  <a onclick="look('about')" href="#">ABOUT</a>
  <a onclick="look('contacts')" href="#">CONTACTS</a>

  <div style="display:none" id="about">
    <p>about</p>
  </div>
  <div style="display:none" id="contacts">
    <p>contacts</p>
  </div>
  <div>
    <p>Постоянный див который не нужно закрывать</p>
  </div>
  <script>
    function look(elemId) {
      $('#' + elemId).toggle();
      $('#about, #contacts').not('#' + elemId).hide();
    }
  </script>
</body>

2
  • Если добавить <div>постоянный див</div> То код закрывает абсолютно все div. А требуется about или contacts.
    – Olexko
    20 мая 2017 в 7:21
  • @Olexko Убрал закрытие постоянного div. Можно назначить div'ам, между которыми надо переключаться один класс, тогда не надо будет перечислять все их id. Также назначать события на действия click всем div c этим классом вместо onclick.
    – Alex78191
    20 мая 2017 в 10:33
2

Добавьте тип yourType в нужные Вам div. Затем, в начале своей функции методом querySelectorAll() получите все div типа yourType и закройте их:

<body>
<a onclick="look('about'); return false;" href="#">ABOUT</a>
<a onclick="look('contacts'); return false;" href="#">CONTACTS</a>

<div type = 'yourType' style="display:none" id="about"><p>about</p></div>
<div type = 'yourType' style="display:none" id="contacts"><p>contacts</p></div>
<div><p>Постоянный див, который не нужно закрывать</p></div>
<script>
  function look(elemId) {
    var divs = document.querySelectorAll('div[type=yourType]');
    for(var i=0; i < divs.length; i++)
       divs[i].style.display = "none";
    var elem = document.getElementById(elemId);
    elem.style.display = "block";
  }
</script>
</body>

2
  • @Olexko, обновил ответ
    – Sv__t
    20 мая 2017 в 10:12
  • В вашем ответе elem.style.display === "none" ? elem.style.display = "block" : elem.style.display = "none"; равно elem.style.display = "block";
    – Alex78191
    20 мая 2017 в 10:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.