// 创建选项卡容器 const tabsContainer = document.createElement('div'); tabsContainer.style.display = 'flex'; tabsContainer.style.marginBottom = '10px'; // 创建“停催”选项卡 const stopTab = document.createElement('div'); stopTab.textContent = '停催'; stopTab.style...-Go服务器开发

当然可以，你可以通过将样式提取到 CSS 类中来减少代码量，同时也可以利用 jQuery 或者其他库来更方便地应用样式。如果你希望使用类似 stopTab.css({}) 的写法，以下是一个优化后的示例代码：

// 创建选项卡容器
const tabsContainer = document.createElement('div');
tabsContainer.style.display = 'flex';
tabsContainer.style.marginBottom = '10px';
// 创建公共样式函数
const setTabStyle = (element, isActive) => {
  element.style.padding = '10px';
  element.style.cursor = 'pointer';
  element.style.border = '1px solid #ccc';
  if (isActive) {
    element.style.backgroundColor = '#2FA4E7'; // 选中时背景颜色
    element.style.color = 'white'; // 选中时文本颜色
  } else {
    element.style.backgroundColor = '#f1f1f1'; // 未选中时背景颜色
    element.style.color = '#2FA4E7'; // 未选中时文本颜色
  }
};
// 创建“停催”选项卡
const stopTab = document.createElement('div');
stopTab.textContent = '停催';
setTabStyle(stopTab, false);
// 创建“可催”选项卡
const activeTab = document.createElement('div');
activeTab.textContent = '可催';
setTabStyle(activeTab, true); // 默认选中
// 创建内容容器
const contentContainer = document.createElement('div');
contentContainer.style.border = '1px solid #ccc';
contentContainer.style.padding = '10px';
// 当前选中的选项卡
let currentTab = 'active';
// 切换选项卡的函数
const switchTab = (tab) => {
  setTabStyle(stopTab, tab === 'stop');
  setTabStyle(activeTab, tab === 'active');
  
  contentContainer.textContent = tab === 'stop' ? '停催内容' : '可催内容';
};
// 添加事件监听器
stopTab.addEventListener('click', () => switchTab('stop'));
activeTab.addEventListener('click', () => switchTab('active'));
// 将选项卡和内容容器添加到页面中
tabsContainer.appendChild(stopTab);
tabsContainer.appendChild(activeTab);
document.body.appendChild(tabsContainer);
document.body.appendChild(contentContainer);

在这个版本的代码中，我们创建了一个 setTabStyle 函数，该函数负责设置每个选项卡的样式。这样可以减少重复代码，并使得切换样式变得更加简洁。通过这种方式，布局逻辑和样式处理都更加清晰。同时，你可以将所有的 CSS 样式放入外部 CSS 文件或 <style> 标签中，这样会使你的 JavaScript 更加简洁。

内容由零声教学AI助手提供，问题来源于学员提问