Как закрыть все divы

235
23 мая 2017, 02:52

Я новичек. Никак не могу разобраться, как закрыть один 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>

Answer 1

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

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

READ ALSO
Как с помощью radio inputa сделать динамическое изменение цены опционального товара?

Как с помощью radio inputa сделать динамическое изменение цены опционального товара?

Здравствуйте! Делаю сайт, заказ Суши и роллы и там есть опциональные товары (например Роллы), прежде чем добавить в корзину клиенту нужно...

292
Flexbox, Как убрать часть текста?

Flexbox, Как убрать часть текста?

Eсть 2 блока первый текст 2-й картинка Как убрать часть текста с помощью flexbox при разрешении 768px

267
Помогите ускорить запрос к MySQL с большим offset limit

Помогите ускорить запрос к MySQL с большим offset limit

Подскажите, пожалуйста, как лучше составить запрос к mysql для вывода новостей на DLE, чтобы максимально ускорить? по дефолту представлен следующий...

339
Как найти связанные таблицы MySQL?

Как найти связанные таблицы MySQL?

Как найти связанные таблицы MySQL? Те

339