JavaScript实现tab切换。

点击科技显示图一, 点击探索显示图二。

在这里插入图片描述

body部分：

    <div class="box"><ul><li class="active">科技</li><li>探索</li></ul><ol><li class="active">科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技</li><li>探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索</li></ol></div>

style样式：

<style>* {margin: 0;padding: 0;}ul,ol,li {list-style: none;}.box {width: 600px;height: 400px;border: 3px solid pink;margin: 50px auto;display: flex;flex-direction: column;background-color: #f0f0f0;}.box>ul {width: 260px;height: 60px;display: flex;}.box>ul>li {flex: 1;color: black;background-color: #f0f0f0;font-size: 24px;display: flex;justify-content: center;align-items: center;cursor: pointer;width: 260px;}.box>ul>li.active {background-color: orange;color: white;}.box>ol {flex: 1;position: relative;background-color: white;}.box>ol>li {width: 100%;height: 100%;color: black;position: absolute;left: 0;top: 0;display: none;}.box>ol>li.active {display: flex;}</style>

JavaScript部分：

<script>//1、获取元素var btns = document.querySelectorAll('ul>li')var tabs = document.querySelectorAll('ol>li')//2、给btns里面所有按钮添加点击事件btns.forEach(function (item, index) {item.onclick = function () {//2-2给btns 和tabs 里面的所有内容取消active类名btns.forEach(function (t, i) {t.className = ''tabs[i].className = ''})//2-3当前点击的按钮和索引对应的盒子添加active类名item.className = 'active'tabs[index].className = 'active'}})
</script>

最后效果如下：
在这里插入图片描述
全部代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul,ol,li {list-style: none;}.box {width: 600px;height: 400px;border: 3px solid pink;margin: 50px auto;display: flex;flex-direction: column;background-color: #f0f0f0;}.box>ul {width: 260px;height: 60px;display: flex;}.box>ul>li {flex: 1;color: black;background-color: #f0f0f0;font-size: 24px;display: flex;justify-content: center;align-items: center;cursor: pointer;width: 260px;}.box>ul>li.active {background-color: orange;color: white;}.box>ol {flex: 1;position: relative;background-color: white;}.box>ol>li {width: 100%;height: 100%;color: black;position: absolute;left: 0;top: 0;display: none;}.box>ol>li.active {display: flex;}</style>
</head><body><div class="box"><ul><li class="active">科技</li><li>探索</li></ul><ol><li class="active">科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技</li><li>探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索探索</li></ol></div><script>//1、获取元素var btns = document.querySelectorAll('ul>li')var tabs = document.querySelectorAll('ol>li')//2、给btns里面所有按钮添加点击事件btns.forEach(function (item, index) {item.onclick = function () {//2-2给btns 和tabs 里面的所有内容取消active类名btns.forEach(function (t, i) {t.className = ''tabs[i].className = ''})//2-3当前点击的按钮和索引对应的盒子添加active类名item.className = 'active'tabs[index].className = 'active'}})</script>
</body></html>