最简单的tab选项卡


html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Tab选项卡title>
    <style>
      .container {
        max-width: 800px;
        margin: 30px auto;
        border-radius: 4px;
        box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.3);
        padding: 16px;
      }
      .tabs .tab-header {
        display: flex;
        font-size: 13px;
        color: #303030;
        line-height: 30px;
        font-weight: 500;
        border-bottom: 2px solid #ddd;
      }
      .tabs .tab-item {
        margin-right: 30px;
        margin-bottom: -2px;
        cursor: pointer;
      }
 
      .tabs .tab-item.active {
        color: #409eff;
        border-bottom: 2px solid red;
      }
 
      .tabs .tab-panel {
        padding: 16px 0;
        font-size: 14px;
        display: none;
      }
 
      .tabs .tab-panel.active {
        display: block;
      }
    style>
  head>
  <body>
    <div class="container">
      <h2>Tab选项卡h2>
      <div class="tabs">
        <div class="tab-header">
          <span class="tab-item active">用户管理span>
          <span class="tab-item">配置管理span>
          <span class="tab-item">角色管理span>
          <span class="tab-item">定时任务补偿span>
        div>
        <div class="tab-content">
          <div class="tab-panel active">111div>
          <div class="tab-panel">222div>
          <div class="tab-panel">333div>
          <div class="tab-panel">4444div>
        div>
      div>
    div>
 
    <script>
      const tabItems = document.querySelectorAll(".tabs .tab-item");
      const tabPanels = document.querySelectorAll(".tabs .tab-panel");
 
      tabItems.forEach((tabItem) => {
        tabItem.onclick = function () {
          tabItems.forEach((tabItem) => tabItem.classList.remove("active"));
          this.classList.add("active");
 
          let index = [...tabItems].indexOf(this);
          tabPanels.forEach((panel) => {
            panel.classList.remove("active");
          });
          tabPanels[index].classList.add("active");
        };
      });
    script>
  body>
html>

相关阅读:
Python代码自动转成其他编程语言代码
linux高级篇基础理论二（详细文档、LAMP、SHELL、sed正则表达式）
开发两年，作为过来人的建议
Selenium 三种等待方式详解（强制等待、隐式等待、显示等待）
大连交通大学计算机考研资料汇总
RESTFul：RESTful简介、RESTful的实现、RESTFul案例
java的Timer全网最详细总结
大模型日报｜11 篇必读的大模型论文
【HTML】【休闲益智】真相？真香？只有一个！看看谁是大馋虫 or 贪吃鬼（找出真正吃了月饼的人
阿里2022“研究型实习生”计划公布，开放200多个科研选题

原文地址：https://blog.csdn.net/moonla3/article/details/128124217