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>
原文地址：https://blog.csdn.net/lljss1980/article/details/142485028
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！