jQuery实现选项卡

css：

ul, li, ol {
  list-style: none;
}

.box {
  width: 600px;
  height: 400px;
  border: 10px solid #333;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
}

.box > ul {
  width: 100%;
  height: 60px;
  display: flex;
}

.box > ul >  li {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 40px;
  background-color: skyblue;
  cursor: pointer;
}

.box > ul >  li.active {
  background-color: orange;
}

.box > ol {
  flex: 1;
  position: relative;
}

.box > ol > li {
  width: 100%;
  height: 100%;
  background-color: purple;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 100px;
  color: #fff;

  position: absolute;
  left: 0;
  top: 0;
}

.box > ol > li.active {
  display: flex;
}`

html

• 1
• 2
• 3

1. 1
2. 2
3. 3

`

js：

// 1，先引入jquery.min.js文件
 //2.具体代码
 //点击选择部分
 $('ul > li').click(function () {
 //只给点击的li添'active'类名
       $(this) // 点击的那个 li
        .addClass('active') // 添加 active
        .siblings() // 所有兄弟元素
        .removeClass('active') // 移出 active

// 根据点击选择展示部分
  //    索引对应的那一个有类名
  $('ol > li') // 所有的 li
    .removeClass('active') // 移出类名
    .eq($(this).index()) // 找到第几个, 和点击的这个li 索引对应给的那一个
    .addClass('active') // 添加 active 类名
})`