面向对象2-用箭头函数实现选项卡的demo

最新推荐文章于 2023-09-08 17:50:22 发布

原创最新推荐文章于 2023-09-08 17:50:22 发布 · 298 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

这段代码展示了如何使用JavaScript动态创建一个包含`<ul>`和`<ol>`元素的选项卡结构，并在鼠标悬停事件上设置响应，使得当鼠标悬停在某个选项上时，对应的选项卡和列表项会高亮显示。该实现利用了箭头函数和DOM操作，适用于前端页面交互的场景。

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