Управление содержимым div

243

08 марта 2018, 10:01

function toggle(imgElem, divId) { 
  if (document.getElementById) { 
    var divElem = document.getElementById(divId); 
    if (divElem.className == "closed") { 
      divElem.className = "opened"; 
      document.getElementById("all_projects"); 
    } else { 
      divElem.className = "closed"; 
      document.getElementById("all_projects"); 
    } 
  } 
} 
 
function toggle(imgElem, divId) { 
  if (document.getElementById) { 
    var divElem = document.getElementById(divId); 
    if (divElem.className == "closed") { 
      divElem.className = "opened"; 
      document.getElementById("pohotography"); 
    } else { 
      divElem.className = "closed"; 
      document.getElementById("pohotography"); 
    } 
  } 
}

.closed { 
  display: none; 
} 
 
.opened { 
  color: red; 
} 
 
.closed_1 { 
  display: none; 
} 
 
.opened_1 { 
  display: block; 
  color: red; 
}

<div class="caption_and_menu"> 
  <ul> 
    <li><a id="all_projects" onclick="toggle(this,'openbox')">ALL PROJECTS</a></li> 
    <li><a id="pohotography" onclick="toggle(this,'openbox_1')">PHOTOGRAPHY</a></li> 
  </ul> 
</div> 
 
<div id="openbox" class="closed"> 
  <p>Hallo weld!</p> 
</div> 
<div id="openbox_1" class="closed_1"> 
  <p>Hi!</p> 
</div>

Имеется три пункта меню на сайте. Нужно кликая по ним менять содержимое div. Например:

ссылка на фотоальбом - показать фотоальбом
ссылка на портфолио - показать портфолио

и т.д..
При этом скрыв все другие div. Пока код у меня готов только на скрыть-показать по клику содержимое div. Приходит на ум, просто копировать для каждого элемента функцию, но это конечно не верный подход.

Подскажите решение.

Answer 1

[...document.getElementsByClassName('open')].forEach((s, i) => { 
  s.addEventListener('click', function() { 
    [...document.getElementsByClassName('open')].forEach((a, l) => { 
      document.getElementsByClassName('openBox')[l].classList.remove('active'); 
      document.getElementsByClassName('open')[l].classList.remove('openActive'); 
    }) 
    document.getElementsByClassName('openBox')[i].classList.add('active'); 
    s.classList.add('openActive'); 
  }) 
})

.openActive { 
  color: red; 
} 
 
.openBox { 
  opacity: 0; 
  transition: opacity .3s; 
} 
 
.openBox.active { 
  opacity: 1; 
  transition: opacity .3s; 
}

<div class="caption_and_menu"> 
  <ul> 
    <li><a class="open">ALL PROJECTS</a></li> 
    <li><a class="open">PHOTOGRAPHY</a></li> 
  </ul> 
</div> 
 
<div id="openbox" class="openBox"> 
  <p>Hallo weld!</p> 
</div> 
<div id="openbox_1" class="openBox"> 
  <p>Hi!</p> 
</div>