JSFiddle - React, Tailwind, and code Playground

by 142536yu

HTML

<div class="box">
    <div>
      <p class="title">hover</p>
      <div class="tab-hover">
        <ul class="tab-box tab-hover-box">
          <li class="tab-box-item">tab1</li>
          <li class="tab-box-item">tab2</li>
          <li class="tab-box-item">tab3</li>
          <li class="tab-box-item">tab4</li>
          <li class="tab-box-item">tab5</li>
        </ul>
      </div>
    </div>

    <div>
      <p class="title">click</p>
      <div class="tab-click">
        <ul class="tab-box tab-click-box">
          <li class="tab-box-item">tab1</li>
          <li class="tab-box-item">tab2</li>
          <li class="tab-box-item">tab3</li>
          <li class="tab-box-item">tab4</li>
          <li class="tab-box-item">tab5</li>
        </ul>
      </div>
    </div>
    <div>
      从中间展开 after 加 margin: auto 即可从中间展开
    </div>
  </div>

CSS

* {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }


  .box {
    margin-top: 200px;
  }

  .box > div { margin: 200px 0 }

  .tab-hover, .tab-click {
    margin: auto;
    width: 60%;
  }

  .tab-box {
    display: flex;
  }

  .tab-box-item {
    width: 20%;
    text-align: center;
    color: #909399;
    position: relative;
  }

  .tab-box-item:after {
    content: "";
    position: absolute;
    left: 100%;
    width: 0;
    bottom: 0;
    height: 2px;
    background-color: #00adb5;
    transition: all .4s;
  }

  .tab-hover-box li:hover, .active {
    color: #00adb5;
  }

  .tab-hover-box li:hover ~:after, .active ~:after {
    left: 0;
  }

  .tab-hover-box li:hover:after, .active:after {
    left: 0;
    width: 100%;
    transition-delay: .1s;
  }

  .title {
    padding-left: 30px;
    font-size: 12px;
    color: #ddd;
  }

JavaScript

const ul = document.querySelector('.tab-click-box');
  const aLi = ul.querySelectorAll('li');
  let cIndex = -1;
  aLi.forEach((item, index) => {
      item.onclick = function () {
          console.log('click');
          item.classList.add('active');
          if (cIndex > -1 && cIndex !== index) {
              aLi[cIndex].className = 'tab-box-item'
          }
          cIndex = index;
      }
  })