原生JS动态实现tab

html代码：

<div id="root"></div>

JS代码

const tab = [{
      id: 1,
      name: '苹果'
    },
    {
      id: 2,
      name: '香蕉'
    },
    {
      id: 3,
      name: '梨'
    },
  ]
  let root = document.getElementById('root')

  function getdata(tab, num) {
    tab.map((e, i) => {
      let pNode = num == i ? '<p class="p color active" ' + ' id=' + i + '>' + e.name + '</p>' :
        '<p class="p color" ' + 'id=' + i + '>' + e.name + '</p>'
      root.innerHTML += pNode
    })
  }

  function getClick() {
    let pArr = document.getElementsByTagName('p')
    root.addEventListener('click', (e) => {
      for (let i = 0; i < pArr.length; i++) {
        if (e.target.id == i) {
          console.log(i);
          pArr[i].className += ' active'
        } else {
          pArr[i].classList.remove('active')
        }
      }
    })
  }
  getdata(tab, 0)
  getClick()

CSS样式

    #root {
      display: flex;

    }

    .p {
      width: 80px;
      height: 40px;
      line-height: 40px;
      border: 1px solid paleturquoise;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
    }

    .color {
      background-color: pink;
    }

    .active {
      background-color: red !important;
    }

效果