ZBLOG

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

当然可以,你可以通过将样式提取到 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助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=22294

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?