演示图

QQ录屏20231125203643 -original-original.gif
代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Tab</title>
    <style>
        .tab {
  cursor: pointer;
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  margin-right: 10px;
}
.tab:hover{
    background-color: yellow;
}

.content {
  display: none;
  padding: 10px;
  background-color: #f1f1f1;
}


    </style>
</head>
<body>
    <div id="tabContainer">
        <div class="tab" onclick="changeTab(0)">英雄联盟</div>
        <div class="tab" onclick="changeTab(1)">Dota2</div>
        <div class="tab" onclick="changeTab(2)">崩坏三</div>
        <div class="tab" onclick="changeTab(3)">明日方舟</div>
      </div>
      
      <div id="contentContainer">
        <div class="content">《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。</div>
        <div class="content">《刀塔2》也被称作《DOTA2》，由《DOTA》的地图核心制作者IceFrog（冰蛙）联手美国Valve公司研发的一款游戏，于2013年4月28日开始测试，发布中文名为“刀塔”，是该系列的第二部作品。</div>
        <div class="content">崩坏3 [52] 》是由米哈游科技（上海）有限公司制作发行的一款角色扮演类国产手游，该作于2016年10月14日全平台公测；2020年12月24日，登陆WeGame [1] ；2021年11月4日，游戏正式登陆Steam</div>
        <div class="content">《明日方舟》是由鹰角网络自主开发运营的一款策略向即时战略塔防游戏，于2019年5月1日公测。 [1-3]该游戏适龄级别为12+。</div>
      </div>
     <script>
        function changeTab(index) {
  var tabs = document.getElementsByClassName('tab');
  var contents = document.getElementsByClassName('content');
  
  // 隐藏所有内容
  for (var i = 0; i < contents.length; i++) {
    contents[i].style.display = 'none';
  }
  
  // 显示当前选中的内容
  contents[index].style.display = 'block';
  
  // 移除所有选项卡的选中样式
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active');
  }
  
  // 添加当前选中的选项卡的选中样式
  tabs[index].classList.add('active');
}

// 默认选择第一个选项卡
changeTab(0);
     </script>      
</body>
</html>
06.demo Tab选项卡

演示图

代码部分
