js- 在当前元素添加/移除Active 活动类

点击前： 

点击其它标签后（active活动类改变）：

布局：

<ul class="constainer">
    <li class="one active">1</li>
    <li class="one">2</li>
    <li class="one">3</li>
    <li class="one ">4</li>
    <li class="one ">5</li>
  </ul>

js实现：

1、使用两个循环，外部循环给每一个li标签添加点击事件，点击事件内部循环则移除当前所有li标签的活动类，然后给当前点击的li标签添加活动类。

  let child = document.querySelectorAll('li');
    let container = document.querySelector('ul');
    // 1、双重循环
    for (let i = 0; i < child.length; i++) {
      child[i].addEventListener('click', function (e) {
        // 删除所有标签的active类名
        for (let j = 0; j < child.length; j++) {
          child[j].classList.remove('active')
        }
        // 给当前标签添加active类名
        this.classList.add('active')
      })
    }

2、上面移除活动类的做法可以更高效

 // 2 一重循环
    for (let i = 0; i < child.length; i++) {
      child[i].addEventListener('click', function (e) {
        // 删除所有标签的active类名
        document.querySelector('.constainer .active').classList.remove('active')
        // 给当前标签添加active类名
        this.classList.add('active')
      })
    }

样式：

 <style>
    * {
      margin: 0;
      padding: 0;
    }



    /* ：translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。当使用：top: 50%;left: 50%;是以左上角为原点，故不处于中心位置。translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，
而translate可以在不知道宽高的情况下进行居中，
tranlate（）函数中的百分比是相对于自身宽高的百分比，
所以能进行居中。 */

    .constainer {
      /* margin: auto; */
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      /* bottom: 0; */
      /* right: 0; */
      left: 50%;
      padding: 10px;
      width: 450px;
      height: 60px;
      display: flex;
      justify-content: space-around;
      border: 1px solid black;

    }

    ul>li {
      list-style: none;
    }

    .one {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 80px;
      border: 1px solid black;
      background-color: pink;
    }

    .active {
      background-color: skyblue;
    }
  </style>