要在 JavaScript 中创建一个 Tabs 布局并实现“停催”和“可催”两个选项，我们可以使用简单的 DOM 操作来构建这个布局。以下是如何在你的 JS 代码中实现这一目标的示例：
// 创建 tabs 容器
const tabsContainer = document.createElement('div');
tabsContainer.className = 'tabs-container';
// 创建 "停催" 标签
const stopTab = document.createElement('button');
stopTab.className = 'tab';
stopTab.innerText = '停催';
tabsContainer.appendChild(stopTab);
// 创建 "可催" 标签
const availableTab = document.createElement('button');
availableTab.className = 'tab';
availableTab.innerText = '可催';
tabsContainer.appendChild(availableTab);
// 创建内容容器
const contentContainer = document.createElement('div');
contentContainer.className = 'content-container';
// 创建 "停催" 内容
const stopContent = document.createElement('div');
stopContent.className = 'content';
stopContent.innerText = '这是停催内容'; // 可以根据实际需要填充更多信息
// 创建 "可催" 内容
const availableContent = document.createElement('div');
availableContent.className = 'content';
availableContent.innerText = '这是可催内容'; // 可以根据实际需要填充更多信息
// 将内容添加到内容容器
contentContainer.appendChild(stopContent);
contentContainer.appendChild(availableContent);
// 隐藏可催内容，默认只显示停催内容
availableContent.style.display = 'none';
// 添加事件监听器以切换标签和显示相应内容
stopTab.addEventListener('click', () => {
stopContent.style.display = 'block';
availableContent.style.display = 'none';
});
availableTab.addEventListener('click', () => {
stopContent.style.display = 'none';
availableContent.style.display = 'block';
});
// 将 tabs 和 content 容器添加到页面中（假设你有一个已有的父元素）
document.body.appendChild(tabsContainer);
document.body.appendChild(contentContainer);
在这段代码中：
- 我们创建了一个
tabs-container，包含两个按钮：“停催”和“可催”。 - 还创建了一个
content-container，用于存放与每个标签相关联的内容。 - 默认情况下，我们隐藏“可催”的内容，并通过点击事件监听器切换它们的显示状态。
注意：你可能需要为这些元素应用 CSS 样式，以便使其外观更符合需求。例如，可以设置 .tabs-container, .tab, 和 .content 的样式以美化布局。
内容由零声教学AI助手提供，问题来源于学员提问
