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" },  // 更多数据...  ]  
<!DOCTYPE html>  
<html lang="en">  
<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" },  // 更多数据...  ]  }  ]  
}; function toggleTab(button, index) {  const allTabs = document.querySelectorAll('#tabs button');  allTabs.forEach(tab => tab.classList.remove('active-tab'));  button.classList.add('active-tab');  showTabContent(index);  
}  function showTabContent(index) {  const tabContents = document.querySelectorAll('.tab-content');  tabContents.forEach(tabContent => tabContent.classList.remove('active'));  tabContents[index].classList.add('active');  
}  function createTable(data) {  const table = document.createElement('table');  const thead = table.createTHead();  const headerRow = thead.insertRow();  ['Num1', 'Num2', 'Status1', 'Status2'].forEach(text => {  const th = document.createElement('th');  th.textContent = text;  headerRow.appendChild(th);  });  const tbody = table.createTBody();  data.forEach(item => {  const row = tbody.insertRow();  ['num1', 'num2', 'status1', 'status2'].forEach(key => {  const cell = row.insertCell();  cell.textContent = item[key];  });  });  return table;  
}  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 = () => toggleTab(tabButton, index);  tabsDiv.appendChild(tabButton);  const tabContent = document.createElement('div');  tabContent.className = 'tab-content';  const table = createTable(dataset.data);  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');  
}  
</script>  
</body>  
</html>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

基于Springboot社区论坛JAVA|VUE|SSM计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解

基于Springboot社区论坛JAVA|VUE|SSM计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解

源代码数据库LW文档&#xff08;1万字以上&#xff09;开题报告答辩稿 部署教程代码讲解代码时间修改教程 一、开发工具、运行环境、开发技术 开发工具 1、操作系统&#xff1a;Window操作系统 2、开发工具&#xff1a;IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…
阅读更多...
2024双11买什么东西比较好？2024双十一好物推荐

2024双11买什么东西比较好？2024双十一好物推荐

双十一各种爆款商品&#xff0c;打折商品非常多&#xff0c;容易让人挑花眼也容易落入消费主义的陷阱&#xff0c;买回家后发现并不实用&#xff0c;甚至可能是自己平常生活中根本用不上的东西&#xff01;即使是打折活动也要在购买前考虑一下自己是否需要&#xff0c;在日常生…
阅读更多...
Android (rust) vulkan (JNI) 画一个三角形: VulkanSurfaceView 初始化

Android (rust) vulkan (JNI) 画一个三角形: VulkanSurfaceView 初始化

上文说到, vulkan 作为一种 GPU 编程接口标准, 具有很好的跨平台能力. 并且在 wayland (GNU/Linux) 成功使用 vulkan 绘制了一个三角形. 今天, 我们同样使用 vulkano (rust), 在 Android (手机) 也画一个三角形吧 ~ 本文的解决方案主要参考了 stackoverflow 的一篇文章 (链接…
阅读更多...
ITU标准引领车内通讯新纪元

ITU标准引领车内通讯新纪元

在现代汽车科技更迭的今天&#xff0c;车内通讯与免提通话系统的性能与稳定性成为了消费者购车时不可忽视的重要因素。随着国际电信联盟&#xff08;ITU&#xff09;一系列标准的推出&#xff0c;车内通讯体验正迈向新的高度。本文将深入探讨ITU-T P.1100、P.1110、P.1120、P.1…
阅读更多...
PTA L1-070 吃火锅

PTA L1-070 吃火锅

L1-070 吃火锅&#xff08;15分&#xff09; 以上图片来自微信朋友圈&#xff1a;这种天气你有什么破事打电话给我基本没用。但是如果你说“吃火锅”&#xff0c;那就厉害了&#xff0c;我们的故事就开始了。 本题要求你实现一个程序&#xff0c;自动检查你朋友给你发来的信息…
阅读更多...
Django 对数据库的增删改查

Django 对数据库的增删改查

新增 使用方法&#xff1a;类模型.objects.create 类模型 from django.db import models# Create your models here. class Car(models.Model):user models.CharField(max_length200)plate_number models.CharField(max_length20)def __str__(self):return f{self.user} -…
阅读更多...
论文 | Reframing Instructional Prompts to GPTk’s Language

论文 | Reframing Instructional Prompts to GPTk’s Language

作者&#xff1a;Swaroop Mishra, Daniel Khashabi, Chitta Baral, Yejin Choi, Hannaneh Hajishirzi 论文摘要&#xff1a;语言模型 (LM) 更容易遵循哪些类型的指令提示&#xff1f; 我们通过进行广泛的实证分析来研究这个问题&#xff0c;这些分析阐明了成功指令提示的重要特…
阅读更多...
vs2019 当前不会命中断点，还没有为该文档加载任何符号

vs2019 当前不会命中断点，还没有为该文档加载任何符号

问题&#xff1a; 解决问题&#xff1a; 1.检查C/C中的调试信息格式&#xff1b; 2. 检查连接器中的生成调试信息&#xff1b; 3.我的错误是修改过调试中的 “命令”这项导致的&#xff0c;下图已经改回默认&#xff1b;
阅读更多...
责任链模式优化 文章发布的接口（长度验证，敏感词验证，图片验证等环节） 代码，示例

责任链模式优化 文章发布的接口（长度验证，敏感词验证，图片验证等环节） 代码，示例

需求&#xff1a;后端需要提供一个文章发布的接口&#xff0c;接口中需要先对文章内容进行如下校验&#xff0c;校验通过后才能发布 1. 文章长度不能超过1万个字符 2. 不能有敏感词 3. 文章中图片需要合规 责任链相当于一个链条一样&#xff0c;链条上有很多节点&#xff0c;节…
阅读更多...
基于STM32设计的室内育苗环境管理系统(物联网)

基于STM32设计的室内育苗环境管理系统(物联网)

文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成 1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发 1.5 模块的技术详情介绍【1】ESP8266-WIFI模块【2】MQ135传感器【4】DHT11传感器【5】B1750传感器 …
阅读更多...
1. 值、类型与运算符

1. 值、类型与运算符

在计算机的世界里&#xff0c;只有数据。你可以读取数据、修改数据、创建新数据&#xff0c;但不能提及非数据的内容。所有这些数据都存储为长位序列&#xff0c;因此本质上是相似的。 位&#xff08;比特&#xff09;是任何类型的二值事物&#xff0c;通常被描述为0和1。在计算…
阅读更多...
CORE Kestrel Web、InProcess、OutOfProcess、启动配置、读取配置文件

CORE Kestrel Web、InProcess、OutOfProcess、启动配置、读取配置文件

Kestrel 服务 ASP.NET Core是一个跨平台框架。 这意味着它支持在不同类型的操作系统&#xff08;例如Windows&#xff0c;Linux或Mac&#xff09;上开发和运行应用程序。 Kestrel是ASP.NET Core应用程序的跨平台Web服务器。 这意味着该服务器支持ASP.NET Core支持的所有平台和…
阅读更多...
VIN码识别：提升汽车行业效率的智能解决方案

VIN码识别：提升汽车行业效率的智能解决方案

随着汽车行业的快速发展&#xff0c;汽车管理与服务的数字化需求日益增加。无论是汽车制造商、经销商、还是售后服务人员&#xff0c;都希望通过更便捷、高效的方式获取汽车的基本信息。在这样的背景下&#xff0c;VIN码识别接口成为了一种有效的智能解决方案。 什么是VIN码&am…
阅读更多...
[笔记]某视觉三维定位系统参数表

[笔记]某视觉三维定位系统参数表

表中的参数是彼此关联的&#xff0c;其实是就是视频解算的速度。里面的1秒直接对应1FPS300m秒直接对应3FPS0-20m的识别范围&#xff0c;与摄像头分辨率、视在焦距与摄像头基线有明确的对应关系。它的矩阵非正方。怀疑一组用于远距&#xff0c;一组用于近距&#xff0c;属于固定…
阅读更多...
Redis系列补充：聊聊布隆过滤器（go语言实践篇）

Redis系列补充：聊聊布隆过滤器（go语言实践篇）

1 介绍 布隆过滤器&#xff08;Bloom Filter&#xff09;是 Redis 4.0 版本之后提供的新功能&#xff0c;我们一般将它当做插件加载到 Redis Service服务器中&#xff0c;给 Redis 提供强大的滤重功能。 它是一种概率性数据结构&#xff0c;可用于判断一个元素是否存在于一个集…
阅读更多...
Register Two Point Sets 注册两个点集

Register Two Point Sets 注册两个点集

文章目录 Register Two Point Sets 注册两个点集Visualize Gradient Descent 可视化梯度下降Hyperparameter Search 超参数搜索JensenHavrdaCharvatTsallisPointSetToPointSetMetricv4类说明 原文url: https://examples.itk.org/src/registration/metricsv4/registertwopointse…
阅读更多...
2024/9/24有关1x1卷积核

2024/9/24有关1x1卷积核

深度学习笔记&#xff08;六&#xff09;&#xff1a;1x1卷积核的作用归纳和实例分析_1x1卷积降维-CSDN博客 从这篇文章写的很好&#xff0c;主要讲的就是1x1卷积核有降维作用&#xff0c;还有就是线性映射作用&#xff08;一般步进长度设置为的为1&#xff0c;也相当于是全连…
阅读更多...
R包：ggspatial空间画图

R包：ggspatial空间画图

ggplot2语法的空间图形画图 Spatial data plus the power of the ggplot2 framework means easier mapping. 加载R包 # install.packages("ggspatial")library(ggplot2) library(ggspatial) load_longlake_data()Using layer_spatial() and annotation_spatial() g…
阅读更多...
Sql Developer期显示格式设置

Sql Developer期显示格式设置

默认时间格式显示 设置时间格式&#xff1a;工具->首选项->数据库->NLS->日期格式: DD-MON-RR 修改为: YYYY-MM-DD HH24:MI:SS 设置完格式显示&#xff1a;
阅读更多...
数学家发现一种新空间镶嵌形状

数学家发现一种新空间镶嵌形状

不知道你没有读过空间嵌合的相关理论。嵌合或者平铺在欧拉的时代就被研究透了&#xff0c;被认为是低矮的树木上已经没有果子。不过最近发现了一种新的镶嵌结构。 数学家这样描述了这种新的形状&#xff0c;这种形状在自然界中很常见ーー从鹦鹉螺标志性的螺旋壳的腔室&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023