html TAB切换按钮变色、自动生成table

<!DOCTYPE html>  
<head>  
<meta charset="UTF-8">  
<title>Dynamic Tabs with Table Data</title>  
<style>  /* 简单的样式 */    .tab-content {    display: none;    border: 1px solid #ccc;    padding: 1px;    margin-top: 0px;    }    .tab-content.active {    display: block;    }    button {  margin-right: 0px; /* 添加一些间隔 */  background-color: transparent; /* 初始背景色透明 */  border: 1px solid #ccc; /* 明确边框样式和颜色 */cursor: pointer; /* 鼠标悬停时显示手指形状 */  padding: 5px 10px; /* 增加内边距以便点击 */  }  .active-tab {    background-color: rgb(77, 218, 223); /* 选中时背景色变为蓝色 */  color: white; /* 文本颜色变为白色，以便在蓝色背景上可见 */border-color: rgb(47, 178, 183); /* 更改边框颜色以匹配背景色 */   }    table {    width: 100%;    border-collapse: collapse;    }    th, td {    border: 1px solid #ddd;    padding: 8px;    text-align: left;    }    th {    background-color: #f2f2f2;    }  
</style>  
</head>  
<body>  
<div id="tabs">  <!-- 选项卡头部将在这里动态生成 -->  
</div>  
<div id="tab-contents">  <!-- 选项卡内容（表格）将在这里动态生成 -->  
</div>  <script>  
// 假设这是从后端获取的数据  
const data = {  "datasets": [  {  "name": "Dataset 1",  "data": [  { "num1": 1234, "num2": 5678, "status1": "on", "status2": "active" },  // 更多数据...  ]  },  {  "name": "Dataset 2",  "data": [  { "num1": 3456, "num2": 7890, "status1": "off", "status2": "inactive" },  // 更多数据...  ]  }  ]  
};  // 动态生成选项卡头部和内容  
const tabsDiv = document.getElementById('tabs');  
const tabContentsDiv = document.getElementById('tab-contents');  // 动态生成选项卡头部和内容  
data.datasets.forEach((dataset, index) => {  const tabButton = document.createElement('button');  tabButton.textContent = `Tab ${index + 1} (${dataset.name})`;  tabButton.onclick = () => {  // 移除所有按钮的.active-tab类  const allTabs = document.querySelectorAll('#tabs button');  allTabs.forEach(tab => tab.classList.remove('active-tab'));  // 为当前点击的按钮添加.active-tab类  tabButton.classList.add('active-tab');  // 显示对应的选项卡内容  showTabContent(index);  };  tabsDiv.appendChild(tabButton); const tabContent = document.createElement('div');  tabContent.className = 'tab-content';  // 创建表格  const table = document.createElement('table');  const thead = table.createTHead();  const headerRow = thead.insertRow();  ['Num1', 'Num2', 'Status1', 'Status2'].forEach(text => {  let th = document.createElement('th');  th.textContent = text;  headerRow.appendChild(th);  });  const tbody = table.createTBody();  dataset.data.forEach(item => {  let row = tbody.insertRow();  ['num1', 'num2', 'status1', 'status2'].forEach(key => {  let cell = row.insertCell();  cell.textContent = item[key];  });  });  tabContent.appendChild(table);  tabContentsDiv.appendChild(tabContent);  
});  // 默认显示第一个选项卡的内容和按钮  
if (data.datasets.length > 0) {  const firstTabButton = tabsDiv.querySelector('button');  firstTabButton.classList.add('active-tab');  const firstTabContent = tabContentsDiv.querySelector('.tab-content');  firstTabContent.classList.add('active');  
}  function showTabContent(index) {  const tabContents = document.querySelectorAll('.tab-content');  tabContents.forEach(tabContent => tabContent.classList.remove('active'));  tabContents[index].classList.add('active');  
}  
</script>  
</body>  
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/433889.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OFDM通信系统发射端需要做ifftshift的原因分析

OFDM通信系统发射端需要做ifftshift的原因分析

对频率为15Hz的正弦波信号进行FFT分析&#xff0c;并且直接画图&#xff0c;matlab代码如下&#xff1a; fs 100; % sampling frequency t 0:(1/fs):(10-1/fs); % time vector S cos(2*pi*15*t); n length(S); X fft(S); f (0:n-1)*(fs/n); %frequenc…
阅读更多...
Django 数据库配置以及字段设置详解

Django 数据库配置以及字段设置详解

配置PostGre 要在 Django 中配置连接 PostgreSQL 数据库&#xff0c;并创建一个包含“使用人”和“车牌号”等字段的 Car 表 1. 配置 PostgreSQL 数据库连接 首先&#xff0c;在 Django 项目的 settings.py 中配置 PostgreSQL 连接。 修改 settings.py 文件&#xff1a; …
阅读更多...
使用ffmpeg合并视频和音频

使用ffmpeg合并视频和音频

使用ffmpeg合并视频和音频 - 哔哩哔哩 简介 FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec&#xff0…
阅读更多...
vue3+ts不能将类型“Timeout”分配给类型“null”不能将类型“Timeout”分配给类型number

vue3+ts不能将类型“Timeout”分配给类型“null”不能将类型“Timeout”分配给类型number

在设置有setTimeout() 函数时&#xff0c;一般是需要进行清除计时器操作的&#xff1b; 常用的做法是定义一个全局变量timer&#xff0c;在onMounted或者有需要的地方进行赋值&#xff0c;在onBeforeUnmount进行clear&#xff0c;一般在定义timer变量时&#xff0c;使用 numbe…
阅读更多...
接档《凡人修仙传》的《牧神记》动画，能否成为黑马？

接档《凡人修仙传》的《牧神记》动画，能否成为黑马？

堪称B站国创半边天的《凡人修仙传》第三季将在10月19日迎来完结&#xff0c;接档它的是由玄机科技制作&#xff0c;改编自宅猪同名网络小说的《牧神记》。这部将于10月27日播出的“玄机娘娘新崽”&#xff0c;能否成功接下《凡人修仙传》的好彩头&#xff0c;成为国漫界下一匹黑…
阅读更多...
Metasploit渗透测试之服务端漏洞利用

Metasploit渗透测试之服务端漏洞利用

简介 在之前的文章中&#xff0c;我们学习了目标的IP地址&#xff0c;端口&#xff0c;服务&#xff0c;操作系统等信息的收集。信息收集过程中最大的收获是服务器或系统的操作系统信息。这些信息对后续的渗透目标机器非常有用&#xff0c;因为我们可以快速查找系统上运行的服…
阅读更多...
计算机视觉综述

计算机视觉综述

大家好&#xff0c;今天&#xff0c;我们将一起探讨计算机视觉的基本概念、发展历程、关键技术以及未来趋势。计算机视觉是人工智能的一个重要分支&#xff0c;旨在使计算机能够“看”懂图像和视频&#xff0c;从而完成各种复杂的任务。无论你是对这个领域感兴趣的新手&#xf…
阅读更多...
HarmonyOS故障恢复实践

HarmonyOS故障恢复实践

一、应用恢复框架 异常感知机制&#xff0c;实时通知应用&#xff1b; 统一保存和恢复机制&#xff0c;降低门槛&#xff1b; 重启恢复&#xff0c;保证恢复结果。 二、API全集 三、应用异常恢复实例 全面的异常检测机制&#xff0c;开放完善ability数据保存接口。当应用异常时…
阅读更多...
Java并发：互斥锁，读写锁，公平锁，Condition，StampedLock

Java并发：互斥锁，读写锁，公平锁，Condition，StampedLock

阅读本文之前可以看一看 Java 多线程基础&#xff1a; Java&#xff1a;多线程&#xff08;进程线程&#xff0c;线程状态&#xff0c;创建线程&#xff0c;线程操作&#xff09; Java&#xff1a;多线程&#xff08;同步死锁&#xff0c;锁&原子变量&#xff0c;线程通信&…
阅读更多...
Flask学习之项目搭建

Flask学习之项目搭建

一、项目基本结构 1、 exts.py 存在的目的&#xff1a;在Python中&#xff0c;如果两个或更多模块(文件)相互导入对方&#xff0c;就会形成导入循环。例如&#xff0c;模块A导入了模块B&#xff0c;同时模块B又导入了模块A&#xff0c;这就会导致导入循环。 比如在这个项目中…
阅读更多...
[数据结构] 二叉树题目(一)

[数据结构] 二叉树题目(一)

目录 一.翻转二叉树 1.1 题目 1.2 示例 1.3 分析 1.4 解决 ​编辑 二. 相同的树 2.1 题目 2.2 示例 2.3 分析 2.4 解决 三. 对称二叉树 3.1 题目 3.2 示例 3.3 分析 3.4 解决 一.翻转二叉树. - 力扣&#xff08;LeetCode&#xff09; 1.1 题目 1.2 示例 1.3 分…
阅读更多...
Android Glide(一)：源码分析，内存缓存和磁盘缓存的分析，实现流程以及生命周期

Android Glide(一)：源码分析，内存缓存和磁盘缓存的分析，实现流程以及生命周期

目录 一、Android Glide是什么&#xff0c;如何使用&#xff1f; Android Glide是一个由Google维护的快速高效的Android图像加载库&#xff0c;它旨在简化在Android应用程序中加载和显示图像的过程&#xff0c;包括内存缓存、磁盘缓存和网络加载&#xff0c;以确保图像加载的快…
阅读更多...
java日志门面之JCL和SLF4J

java日志门面之JCL和SLF4J

文章目录 前言一、JCL1、JCL简介2、快速入门3、 JCL原理 二、SLF4J1、SLF4J简介2、快速入门2.1、输出动态信息2.2、异常信息的处理 3、绑定日志的实现3.1、slf4j实现slf4j-simple和logback3.2、slf4j绑定适配器实现log4j3.2、Slf4j注解 4、桥接旧的日志框架4.1、log4j日志重构为…
阅读更多...
【高景一号卫星】

【高景一号卫星】

高景一号卫星 高景一号卫星是中国自主研发的一系列高分辨率商业遥感卫星&#xff0c;旨在满足全球民用遥感影像市场的需求。以下是对高景一号卫星的详细介绍&#xff1a; 一、基本信息 名称&#xff1a;高景一号&#xff08;SuperView-1, SV-1&#xff09;发射时间&#xf…
阅读更多...
C++入门基础知识87（实例）——实例12【判断闰年】

C++入门基础知识87（实例）——实例12【判断闰年】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于判断闰年的相关内容&#xff01; 关于【…
阅读更多...
什么是托管安全信息和事件管理 SIEM？

什么是托管安全信息和事件管理 SIEM？

什么是 SIEM&#xff1f; 安全信息和事件管理 ( SIEM ) 解决方案最初是一种集中式日志聚合解决方案。SIEM 解决方案会从整个组织网络中的系统收集日志数据&#xff0c;使组织能够从单一集中位置监控其网络。 随着时间的推移&#xff0c;SIEM解决方案已发展成为一个完整的威胁…
阅读更多...
【裸机装机系列】16.kali(ubuntu)-安装linux和win双系统-重装win11步骤

【裸机装机系列】16.kali(ubuntu)-安装linux和win双系统-重装win11步骤

推荐阅读&#xff1a; 1.kali(ubuntu)-为什么弃用ubuntu&#xff0c;而选择基于debian的kali操作系统 注意&#xff1a; 要先装windows&#xff0c;再装linux&#xff0c;不然linux的启动分区会被覆盖掉。为什么双系统要先装windows呢&#xff1f; 在一个新硬盘上&#xff0…
阅读更多...
node.js npm 安装和安装create-next-app -windowsserver12

node.js npm 安装和安装create-next-app -windowsserver12

1、官网下载windows版本NODE.JS https://nodejs.org/dist/v20.17.0/node-v20.17.0-x64.msi 2、安装后增加两个文件夹目录node_global、node_cache npm config set prefix "C:\Program Files\nodejs\node_global" npm config set prefix "C:\Program Files\nod…
阅读更多...
Android PopupWindow.showAsDropDown报错：BadTokenException: Unable to add window

Android PopupWindow.showAsDropDown报错：BadTokenException: Unable to add window

Android PopupWindow.showAsDropDown报错&#xff1a;BadTokenException: Unable to add window Android PopupWindow.showAsDropDown报错&#xff1a; android.view.WindowManager$BadTokenException: Unable to add window -- token null is not valid; is your activity ru…
阅读更多...
vue-实现rtmp直播流

vue-实现rtmp直播流

1、安装vue-video-player与videojs-flash npm install vue-video-player -S npm install videojs-flash --save 2、在main.js中引入 3、组件中使用 这样就能实现rtmp直播流在浏览器中播放&#xff0c;但有以下几点切记&#xff0c;不要入坑 1.安装vue-video-player插件一定…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发