class createTab {
constructor(element, arr) {
this.ele = element;
this.arr = arr;
this.oulListr;
this.oOlListr;
}
// 创建函数动态生成页面
setPage() {
let oUl = document.createElement('ul');
let oOl = document.createElement('ol');
let oUlLis = '';
let oOlLis = '';
this.arr.forEach(function (item, key) {
oUlLis += key === 0 ? `<li class="active" index=${key} name="ulli">${item.ulLi}</li>` : `<li index="${key}" name="ulli">${item.ulLi}</li>`;
oOlLis += key === 0 ? `<li class="active">${item.olLi}</li>` : `<li>${item.olLi}</li>`
})
oUl.innerHTML = oUlLis;
oOl.innerHTML = oOlLis;
this.ele.appendChild(oUl);
this.ele.appendChild(oOl);
this.oulListr = oUl.querySelectorAll('li');
this.oOlListr = oOl.querySelectorAll('li');
}
setEvent(event = 'mouseover') {
this.ele.addEventListener(event,(e)=> {
if(e.target.getAttribute('name')==='ulli'){
this.oulListr.forEach((item,key)=>{
item.classList.remove('active');
this.oOlListr[key].classList.remove('active');
})
e.target.classList.add('active');
this.oOlListr[Number(e.target.getAttribute('index'))].classList.add('active');
}
})
}
}
这部分是用箭头函数实现选项卡为外部引入的js部分