jQuery选项卡

效果图
代码实现
备注：需要引入jQuery

  <script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>

<ul>
    <li>标题1</li>
    <li>标题2</li>
    <li>标题3</li>
    <li>标题4</li>
    <li>标题5</li>
    <li>标题6</li>
    <li>标题7</li>
    <li>标题8</li>
    <li>标题9</li>
    <li>标题10</li>
    <span></span>
  </ul>

* {
      margin: 0;
      padding: 0;
    }

    ul, li {
      list-style: none;
    }

    ul {
      width: 1000px;
      height: 40px;
      margin: 30px auto;

      border-bottom: 3px solid skyblue;

      position: relative;
    }

    ul > li {
      width: 100px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      float: left;
      cursor: pointer;
      position: relative;
      z-index: 999;
    }

    ul > span {
      height: 100%;
      width: 100px;
      border-bottom: 3px solid red;
      position: absolute;
      left: 0;
      top: 0;
      background-color: skyblue;
      z-index: 0;
    }

$('ul > li').mouseover(function () {
      // 让 span 移动
      console.log('span 你得动')
      // 2. 给 span 的 left 设置为 当前移入这个 li 的索引 * 100
      $('span').stop().animate({ left: $(this).index() * 100 }, 50)
      $(this).css('color', 'white').siblings().css('color', 'black')
    })