Имеется меню с двумя вкладками которые содержат вложенные менюшки. При клике на вкладку должны происходить два события:
1) при клике на элемент, этому элементу добавляется класс .active
, а у другого элемента класс .active
должен удалиться.
2) у активной вкладки меню видимое. Второе меню скрыто, имеет класс .hide
. И соответственно при клике на соответствующую вкладку меню становится видимым.
Как удалить класс .active
у элемента при добавлении класса .active
другому элементу? И как связать активные вкладки с отображением скрытого меню, т.е. удалить класс .hide
?
document.addEventListener('DOMContentLoaded', function () {
var wrapnavs = document.getElementById('js-navigation'),
navs = wrapnavs.getElementsByTagName('div');
for( var i = 0; i < navs.length; i++ ){
navs[i].addEventListener('click', selectMenu);
}
function selectMenu() {
if(this.classList.contains('active')){
this.classList.remove('active');
} else {
this.classList.add('active');
}
}
console.log('get to the choppa!!!');
});