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

236

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

292

CSS

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

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

268

MySQL

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

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

339

MySQL

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

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

340