选项卡的两种方法

1 面向过程

style样式
<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol,li{
            list-style:none;
        }
        .box{
            width: 400px;
            height: 500px;
            border: 3px solid pink;
            margin: 10px auto;
            display: flex;
            flex-direction: column;
            
        }
      .box ul{
          width: 100%;
          height: 40px;
          background: green;
          display: flex;
          border-bottom: 2px solid red;
      }
      .box ol{
          flex: 1;
     
          position: relative;
      }
      .box>ul>li{
          width: 25%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-right: 2px solid red;
          /* border-bottom: 2px solid red; */
          color: aliceblue;
      }
      .box ul li:last-child{
          border-right: none;
      }
      .box>ol>li{
        width: 100%;
        height: 100%;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        background: skyblue;
        color: white;
        display: none;

      }
     .box>ul>li.active{
         background: orange;
         color: red;
         text-decoration: underline;
     }
     .box>ol>li.active{
         display: flex;
     }
    </style>
script内容
 <div class="box"></div>
    <script>
         const arr1 = [
            { id:1 , ulLi:'精选' , olLi:'精选内容' },
            { id:2 , ulLi:'美食' , olLi:'美食内容' },
            { id:3 , ulLi:'百货' , olLi:'百货内容' },
            { id:4 , ulLi:'个护' , olLi:'个护内容' },
        ];
        // 定义一个全局变量
        let oUlLis;
        let oOlLis;
        let oBox;
        // 动态写入页面
        setPage();
        setEvent();
        function setPage(){
             oBox=document.querySelector(".box");
        const oUl=document.createElement("ul");
        const oOl=document.createElement("ol");

        let ulLiStr='';
        let olLiStr='';
        arr1.forEach(function(item,key){
            ulLiStr+=key===0?`<li name="ulLi" index=${key} class="active">${item.ulLi}</li>`:`<li name="ulLi" index=${key}>${item.ulLi}</li>`
            olLiStr+=key===0?`<li class="active">${item.olLi}</li>`:`<li>${item.olLi}</li>`
        })
        oUl.innerHTML=ulLiStr;
        oOl.innerHTML=olLiStr;
        oBox.appendChild(oUl);
        oBox.appendChild(oOl);
        oUlLis=oUl.querySelectorAll("li");
        oOlLis=oOl.querySelectorAll("li");
        }
       
    //   给标签添加点击事件
    function setEvent(event="mouseover"){
    oBox.addEventListener(event,function(e){
     if(e.target.getAttribute('name')==='ulLi'){
        oUlLis.forEach(function(item,key){
            item.classList.remove('active');
            oOlLis[key].classList.remove('active');
        })
        e.target.classList.add('active');
        oOlLis[Number(e.target.getAttribute('index'))].classList.add('active');
     }



    })
    }
    </script>

2 面向对象

script内容
<div class="box"></div>;

     <!-- 导入外部文件,加载其中的构造函数 -->

    <script src="./07tab.js"></script>
    <script>
        const arr1 = [
            { id:1 , ulLi:'精选' , olLi:'精选内容' },
            { id:2 , ulLi:'美食' , olLi:'美食内容' },
            { id:3 , ulLi:'百货' , olLi:'百货内容' },
            { id:4 , ulLi:'个护' , olLi:'个护内容' },
        ]; 
        const oBox=document.querySelector('.box');
        const obj1=new CreateTabObj(oBox,arr1);
        obj1.setPage();
        obj1.setEvent();
    </script>
创建的js文件内容
class CreateTabObj{
    constructor(element,arr){
     this.ele=element;
     this.arr=arr;
     this.oUlLis;
     this.oOlLis;

    }
// 构造器外定义函数方法

    setPage(){
     const oUl=document.createElement('ul');
     const oOl=document.createElement('ol');
     let ulLiStr='';
     let  oOlLiStr='';
     this.arr.forEach(function(item,key){
        ulLiStr += key === 0 ? `<li name="ulLi" index="${key}" class="active">${item.ulLi}</li>` : `<li index="${key}" name="ulLi">${item.ulLi}</li>` ;
        oOlLiStr +=key===0?`<li class="active">${item.olLi}</li>`:`<li>${item.olLi}</li>`;

     });
     oUl.innerHTML=ulLiStr;
     oOl.innerHTML= oOlLiStr;
     this.ele.appendChild(oUl);
     this.ele.appendChild(oOl);
     this.oUlLis=oUl.querySelectorAll('li');
     this.oOlLis=oOl.querySelectorAll('li');

    }
    
    setEvent(event='mouseover'){
        // 通过一个变量存储改变前的this指向;

       const _this=this;
       _this.ele.addEventListener(event,function(e){
        if(e.target.getAttribute('name')==='ulLi'){
            _this.oUlLis.forEach(function(item,key){
                item.classList.remove('active');
                _this.oOlLis[key].classList.remove('active');
            })
            
            e.target.classList.add('active');
            _this.oOlLis[Number(e.target.getAttribute('index'))].classList.add('active');
        }
      
    })}
}