要在 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助手提供，问题来源于学员提问
